0

ファイアフォックスのみ！ヘッダー、ボディ、フッターを持つ絶対配置テーブルを使用しています。ヘッダーまたはフッターの高さが動的に変更される場合、中央/本文セルの var 要素はセルの高さに一致する必要があります。これはすべて、最初は動的な変更なしで機能しますが、変更されると、内部変数の height:100% の能力が失われます。楽しいこと:位置CSSをテーブルの親ノードに移動すると、正常に動作します。

ここにデモがあります

コードは次のとおりです。

<!-- WRONG result -->
<!-- Parent does not hold positional css -->
<div style="">
<table style="position:absolute;top:200px;left:100px;height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:block;background:red">With style.position set on table.<br><br>Once table cells height are dynamically altered, this var element (or div) looses its ability to measure height:100%</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>

<!-- RIGHT result -->
<!-- Parent holds positional css -->
<div style="position:absolute;top:200px;left:500px;">
<table style="height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:block;background:red">With style.position set on table.parentNode<br><br>This one behaves how i expect it to</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>
4

1 に答える 1

1

Chrome は他のブラウザーよりも優れていますが、他のブラウザーにバグがあるわけではありません (IE のことを言っているのではありません)。Chrome は、Google Way のバグなどをカバーするだけです。

テーブル マークアップを div や img などのように扱うと、それらと同じように動作する傾向があります。

ここでは、そのプロパティの 1 つを取得しています。

display:block子のをに切り替えるだけですdisplay:table( <var>)

<!-- LEFT result -->
<div style="">
<table style="position:absolute;top:200px;left:100px;height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:table;background:red">With style.position set on table.<br><br>Once table cells height are dynamically altered, this var element (or div) looses its ability to measure height:100%</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>
于 2013-11-13T08:29:51.723 に答える