2013-10-25 5 views
5

絶対に配置された要素をテーブル行の:after:before)として追加したいとします。このhttp://jsbin.com/IGumoye/5/editテーブル行の疑似要素(:after、:before)を安全に使用することはできますか?

見て、私はそれはいくつかの種類のテーブルセルだと思います(少なくとも、Webkitのベース)私は、このような要素のレンダリングエンジンを追加するときにすることを前提としています。

:beforeは、すべてのブラウザでひどく機能します。しかし:後はFirefoxでうまくやっていて、Webkitでうまくいく。 Webkitでは、小さなスペースを確保し、テーブル全体の幅を大きくします。

enter image description here - これはウェブキットで私を悩ますものです。

これを修正するにはどうすればよいですか?なぜそれが起こったのか、私はどこで読むことができますか?

UPDATE 1

解決策:絶対配置要素のための宿主として、この行の最初のテーブルセルを使用します。

http://jsbin.com/IGumoye/10/edit

UPDATE 2

[OK]を、私は私が私の最初の問題の解決策を見つけたと思います。そして私はそれが良いかもしれないと仮定します。しかし、私は最大限のCSSを使いたいと思っていました。問題は - 一部の静的テキストを編集可能にし、ユーザーが他の場所をクリックした場合 - この編集モードを閉じます。この例では

http://jsbin.com/IGumoye/23/edit

+0

これは興味深い問題ですが、レイアウトで何をしようとしているのかは不明です。あなたは精緻化できますか? –

+0

Thx。あなたの答えは怒鳴ります。私がそこで見つけることができるものが見えます。解決策と初期の問題で質問を更新しました。チェックアウトしてください。 –

+0

スクリプトはうまくいくようですが、間違いなく正しいアプローチです。 –

答えて

8

は、本質的にテーブルのレイアウトを破壊し、予期しない結果につながるテーブル行、後、または前にコンテンツを追加するために、::after::before擬似要素を使用しています。

生成されたコンテンツをテーブルセルに追加する場合、結果はより一貫します。

生成されたコンテンツのためのオリジナルの仕様除く外を参照するためにあまりありません:テーブルを作成するときにCSSのレンダリングエンジンが匿名ボックスを生成することを心に留めておく、また

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

は:

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

しかし、生成されたコンテンツはDOMの一部ではないため、テーブルレンダリング処理全体ではおそらく、感覚的な方法。

あなたはよく指定されていない領域を掘り下げており、サポートはすべてブラウザ固有のものです。

レイアウト要件に応じて、JavaScriptまたはjQueryを使用して、テーブルのDOMを目的の効果に変更する必要があります。

関連する問題