0

私は数日前から CSS を独学で学ぼうとしていますが、順調に進んでいます。

そうしている間に問題が発生しました。あなたの助けが必要です。

私は単純な 3 層レイアウトを構築しようとしていますが、IE ではなく FF で完全に機能しています。

CSSは、

#wrapper {
    padding: 5px;
    background-color: yellow;
    margin: 0;
}
#left {
    float :left;
    width: 195px;
    border: 1px solid;
}
#right {
    float: right;
    width: 195px;   
    border: 1px solid;
}
#middle {
    margin-left: 202px;
    margin-right: 202px;
    padding: 0px 3px;
    border: 1px solid;
}

そしてHTMLは、

<body>
<div id="wrapper">
    <div id="left">
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed.
    </div>
    <div id="right">
    jnvfr
    </div>
    <div id="middle">
    ubrei
    </div>
</div>  
</body>

背景色はラッパーの最後まで到達しません。「overflow: hidden;」を追加すると、FF では正常に動作しますが、問題は IE のままです。

また、ここに「overflow: hidden」を追加する目的を説明できる人はいますか?

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

1

コンテナーの高さは、または#wrapperを持たない最も高い要素の高さに対応します。 注意: フローティング ボックスは親要素を展開しません。float:left|rightposition:absolute|fixed

にclearfixを追加でき#wrapperます。

/* For modern browsers */
#wrapper:before,
#wrapper:after  {
    content:            "";
    display:            block;
    overflow:           hidden;
}
#wrapper:after  {
    clear:              both;
}
/* For IE 6/7 (trigger hasLayout) */
#wrapper {
    zoom:               1;
    clear:              both; 
}
于 2012-07-23T17:44:10.017 に答える
0

私にとってはIE9で正常に動作しているようです：http： //jsfiddle.net/bENYd/

HTMLに最新のDOCTYPEを使用していることを確認して、IEがそれをクァークズモードまたはIE7-8標準でレンダリングしないようにします。

<!DOCTYPE html>

HTMLドキュメントの最初にそれを行う必要があります。

于 2012-07-23T17:24:28.270 に答える