0

这几天我一直在尝试自学 CSS，一切都很顺利。

在此过程中，我遇到了一个问题，希望得到您的帮助。

我正在尝试构建一个简单的三层布局，它在 FF 但不是 IE 上完美运行。

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>

背景颜色直到包装结束。添加“溢出：隐藏；”后，它在 FF 中正常工作，但问题仍然存在于 IE 中。

还有谁能解释在这里添加“溢出：隐藏”的目的？

任何帮助，将不胜感激。谢谢。

4

2 回答 2

1

容器#wrapper的高度对应于没有float:left|rightor的最高元素的高度position: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 回答