1

通常、次のように、親要素を子のabsolute配置のコンテキストとして設定できます。

#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    left: 0;
}

これはすべて正常に機能しますが、親のdisplayプロパティが に設定されている場合table-cell、Firefox では機能しません。子要素のポジショニング コンテキストは、その親の上にある最も近い位置の祖先になります。

これは他の場所でも機能することに注意してください。IE8、IE9、Safari、Chrome、Opera でテスト済み。

ここでフィドルを参照してください: http://jsfiddle.net/RZ5Vx/

また、親がdisplayに設定されてinline-blockいるこのフィドルを参照してください。これは Firefox で機能します。

それで、これはバグですか？もしそうなら、それを回避する方法はありますか？

4

1 に答える 1

2

Atable-cellは a 内にあるtableため、次のようになります。

この動くフィドルを見てください！

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    background: #ddd;
    position: relative;
}

注：そこに は がないのでtable、設定してください。

このquirksmodeは、表示宣言で確認できます。

編集済み

W3C 勧告から:: Tables it reads

テーブル エレメントのプロパティ 'position'、'float'、'margin-*'、'top'、'right'、'bottom'、および 'left' の計算値は、テーブルではなくテーブル ラッパー ボックスで使用されます。箱; 継承不可能なプロパティの他のすべての値は、テーブル ラッパー ボックスではなく、テーブル ボックスで使用されます。(テーブル要素の値がテーブルおよびテーブル ラッパー ボックスで使用されていない場合は、代わりに初期値が使用されます。)

これはバグではなく、ステータス・バイ・デザインのようなものです! これを見てください！

編集済み

質問で要求されたように、コメントに配置された回避策を含めるには:

それで、これはバグですか？もしそうなら、それを回避する方法はありますか？

考えられる回避策は次のとおりです。

div要素をas See Fiddle!でラップします。position:relative; 

#wrapper {
    position: relative;
}

注:最も実用的なソリューションです。

内部要素をdivas position:relative; See Fiddle!でラップします。 

#innerWrapper {
    position: relative;
}

注:元の要素のいくつかの定義を innerWrapper で宣言する必要があります。

于 2012-06-05T18:31:58.880 に答える