3

疑似要素を追加して:before、テーブルまたはdivの親に絶対に配置します。設計上の理由から、親にも 20 ピクセルの境界線が必要です。

ww なぜ firefox と IE は一貫性がなく、テーブル内の疑似要素の位置付けが異なるのですか?

私のjsFiddleまたは以下のコードを見てください。

IE10、Chrome29、FF23でテスト済み。

HTML:

<div>i am a div</div>

<table>
<thead>
    <tr><th>header 1</th><th>header 2</th></tr>
</thead>
<tbody>
    <tr><td>entry 1</td><td>entry 2</td></tr>
</tbody>
</table>

CSS:

table,
div {
   border: 20px solid yellow;
   position: relative;
   margin-bottom: 30px;
   height: 50px;
}

table:before,
div:before {
   background: red;
   content: " ";
   position: absolute;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 10px;
   height: 10px;    
}
4

2 に答える 2

0

:beforeFFのテーブルレスレイアウトだけでうまくいくようです。MDN には役立つ情報がいくつかあります。

Firefox 3.5 のポジショニング修正では、コンテンツを個別の前の兄弟として生成することはできませんが (CSS 仕様によると、「:before および :after 疑似要素要素は他のボックスと相互作用し、実際の要素であるかのように...関連する要素のすぐ内側に挿入されます。")、テーブルのないレイアウトをわずかに改善するために使用できます (たとえば、センタリングを実現するため)。

テーブル要素に追加display: blockして固定高さを削除すると、正常に機能しています。

table,
div {
    border: 20px solid yellow;
    position: relative;
    margin-bottom: 30px;
    display: block;
}

table:before,
div:before {
    background: red;
    content: " ";
    position: absolute;
    display: block; 
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;   
}

働くフィドル

詳細については、MDNを参照してください。

于 2013-09-23T12:52:36.273 に答える
0

Firefox がテーブル内の絶対配置要素を処理する方法に問題があるようです。相対的に配置された独自の親 div 内に div と table をラップしてみることはできますか?

このデモを確認してください。

編集: html 構造を変更できない場合は、要素を指定してみてくださいbox-sizing: border-box;。

このデモは、私のマシンの Chrome、FF、および IE で動作するようです。レンダリングされていない場合はお知らせください。もう一度試してみます。

于 2013-09-23T11:49:05.247 に答える