Question

我一直在努力学习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>

直到包装结束时，背景颜色才会到达。添加“overflow：hidden;”后，它在FF中正常工作，但问题仍然存在于IE中。

也可以解释在这里添加“overflow：hidden”的目的吗？

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

Answer 1

容器#wrapper的高度对应于没有float:left|right或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; 
}

Answer 2

对我来说IE9似乎运行良好： http://jsfiddle.net/bENYd/

确保您使用HTML的最新DOCTYPE，以便IE不会以怪癖模式或IE7-8标准呈现它。

<!DOCTYPE html>

在HTML文档的开头应该这样做。

背景不完全在IE中显示

2 个答案: