0

IE7 で問題が発生しています。考えられる「問題」を示すために、次の html を作成しました。

HTML:

<div id="container">
    <div id="head">
    </div>
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="no-float">
    </div>
</div>

CSS:

#container {
    width:200px;
    height:200px;
    margin: 0 auto;
    background-color:#555555;
}
#head {
    width:200px;
    height:20px;
    background-color:black;
    float:left;
}
#left {
    width:100px;
    height:40px;
    background-color:blue;
    float:left;
}
#right {
    width:100px;
    height:40px;
    background-color:red;
    float:left;
}

#no-float {
    width:20px;
    height:20px;
    position:relative;
    background-color:green;
}

私の理解では、通常のコンテンツはフロートされたコンテンツを完全に無視する必要があるため、緑色の非フロート div がコンテナの左上にあると予想しています。これは、IE7 以外でテストしたすべてのブラウザーで期待どおりに機能します。フロートの理解に問題がありますか、それとも IE7 のバグですか? それがバグである場合、誰かがそれを修正するために正しい方向に私を向けることができますか? これが問題のjsfiddleです。

JSFiddle

4

1 に答える 1

0

IE7 の float モデルは恐ろしいです。問題に関連する問題と、フロートだけを使用しても修正されない理由については、こちらを参照してください。要素をソースの順序で維持したい場合は、絶対配置に頼る必要があります。これは、条件付きで IE7 にフィードすることも、最新のすべてのブラウザーでそのまま機能することもできます。

これがフィドルです。

に追加position: relativeして#containerから

#no-float {
    width: 20px;
    height: 20px;
    position:absolute;
    background-color:green;
    top: 0;
    left: 0;
}
于 2013-01-25T23:40:28.917 に答える