0

非常に単純な html コード:

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray">
        content
    </div>
</div>

内側の div が外側の div 内のすべての場所を (2px のマージン) で保持するようにしたいのですが。

ff/chrome/ie8 では動作しますが、ie 6 および 7 では動作しません。

何が問題ですか？

4

3 に答える 3

1

提案：

マージンだけが必要な場合は、内側DIVだけで次のコードを使用できます。

<div style="background-color: gray; width: 296px; height: 396px; border: 2px solid red;">
    content
</div>

境界線だけでない場合は、以下のIE 修正の解決策を参照してください。

非常に簡単な答え：

widthとheight!を設定する必要があります。

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray; width: 296px; height: 396px;">
        content
    </div>
</div>

スクリーンショット:

スクリーンショット

フィドル: http://jsbin.com/okibat/1

于 2012-10-12T06:14:07.833 に答える
0

問題はIE 6, 7、同じ宣言に反対方向を入れることができないことです。

例えば

.absolute {
    top: 0;
    /* you can't put bottom: 0; here in IE since it the opposite */
}
于 2012-10-12T03:32:00.113 に答える
0

IE6 では、div を別の div にネストする必要があります。そうして初めて、内側の div を絶対配置することができます… 場合によっては! div を xhtml の一部に移動すると、意図したとおりに機能しましたが、特定の場所では、その周りの div (内部ではなく) から何かを継承していました。一部の領域で機能し、他の領域では機能しない理由についての合理的な説明を見つけることができませんでしたが、それが何であれ、外側の div がそれを吸収し、内側の div を正しく配置できることに気付きました.

次のような Css クラスを 1 つ作成します。

.bor{ 
border:solid 1px #ccc;
padding:10px; margin:10px;
}

次に、このCSSをコンテンツに追加します

div id="wrapper" class="bor">

 <div id="header" class="bor">
    <div id="logo">Logo goes here</div>
    <div id="phone">9876543210</div>
 </div><!-- #header -->

 <div id="mainContent" class="bor">

    <div id="sidebar" class="bor">
于 2012-10-12T06:32:05.727 に答える