[CSS] Firefox の tr,th,td要素の position プロパティについて

だいぶ前に高津戸さんもブログに書いていましたが、
マークアップする時にちょいちょい忘れてしまうので備忘録として。

Firefox での tr, th, td要素の扱い

Firefox では tr, th, td要素の display プロパティに対する position:relative; の指定が定義されていません。
（「Firefoxでは」というよりは、CSS2 の仕様上そうなっているのだが）
つまり、例えば td要素に position:relative を指定し、そこを基点にして何かの要素を position:absolute で配置するといったスタイルは Firefox では無視されます。

サンプル

かなり強引な例ですが、
次のようにトピックスかなにかの表組を組むとします。

<!-- HTML -->
<div>
<table>
<tr class="new">
<th>9999/99/99</th>
<td>あいうえおあいうえお</td>
</tr>
<tr>
<th>9999/99/99</th>
<td>あいうえおあいうえお</td>
</tr>
</table>
</div>

その td要素に対して次のようなやり方で New! というテキストを表示しようとすると...

/* CSS */
div, table, tr, th, td{
  position:relative;
}
tr.new td{
padding-left:5em;
}
tr.new td:before{
  content:"New!";
  position:absolute;
  color:#ff0000;
  top:0;
  right:0;
}

だいたいの方が下図のようになると想像するかもしれませんが、

前述した理由から、Firefox では想定した位置にテキストが配置されません。
恐らく下図のようになります。（※もちろんマークアップやCSSによりけりですが）

あくまで "例えば" ですが。

この例の場合で言うと、New! のテキストが配置される位置は、
table要素の親要素である div要素の位置が基準となります。

display プロパティに table-xxxx系を指定した場合

display プロパティには table-row, table-cell, table-column といった値を指定できるが、
これらを指定された要素も上述と同様に position:relative の指定が定義されていない扱いとなるため、
上記サンプルと同様にそれらの要素を基点として何かの要素を position:absolute; で配置しようとすると、
Firefox ではスタイルが無視されて想定する表示になりません。

気を付けましょう（自分が）。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/189