ネスト絶対ElementsはFirefoxの

Question

可能性の重複：

Does Firefox support position: relative on table elements?はFirefoxがテーブルセルの相対的な位置を無視していますか？

相対配置されたテーブルセル内に絶対配置要素をネストしようとしていますが、Firefoxはテーブルセルの相対配置を無視しており、絶対配置された要素はブラウザウィンドウに従って配置されます。

HTML：

<table><tbody><tr><td><span></span></td></tr></tbody></table>​ 

CSS：ここ

table{ 
    width:500px; 
    height:50px; 
} 
td { 
    position:relative; 
    width:50%; 
} 
span { 
    position:absolute; 
    right:0; 
    display:block; 
    background:#333; 
    width:20px; 
    height:20px; 
} 

はjsfiddleにexampleです。

これを適切にフォーマットすると、スパンを結果ウィンドウのほぼ中央に配置することになりますが、Firefoxはウィンドウの右端に配置します。要素が絶対的に配置されたままの状態でこの問題を回避するには、右/左/マージンのプロパティには静的な番号がありません。ありがとうございます。

Answer 1

実際には、スパンのトップは、テーブルセルの中央に置かれている...あなたのテーブルに

table{ 
    position: relative; 
    width:500px; 
    height:50px; 
} 

Here's an example

Answer 2

を

position: relative; 

を追加 - 私が推測するので、要素は絶対位置を持ち、テーブルセル内にあります。 specsあたりとして、

span { 
    ... 
    height:20px; 
    margin-top: -10px; /* this one */ 
} 

DEMO

Answer 3

これは本当ですが、Firefoxはそれを無視しない：あなたはspan要素の半分の大きさに等しい負の上マージンを設定することができます

table-row-group、table-header-group、table-footer-group、table-row、table-colに対する 'position：relative'の効果umn-group、table-column、table-cell、table-captionの要素はで、定義されていないのはです。

一つの一般的な解決策はdisplay: relativeで、細胞内の分裂を入れて、その後、絶対位置は、その内部で動作しますが、これは本当にあなたがテーブルを使用しているか次第です。レイアウト用に使用している場合は、レイアウトを達成する別の方法を見つけることをお勧めします。表形式のデータの場合は、代わりに浮動小数点演算が使用されますか？

Answer 4

position:relativeをtdからtableに移動します。