Html 背景不完全在IE上_Html_Css_Internet Explorer_Overflow

Html 背景不完全在IE上

html css internet-explorer

Html 背景不完全在IE上,html,css,internet-explorer,overflow,Html,Css,Internet Explorer,Overflow,几天来，我一直在努力自学CSS，事情进展得很顺利在这样做的过程中，我遇到了一个问题，希望您的帮助我正在尝试建立一个简单的三层布局，它在FF上工作得很好，但在IE上却不行 CSS是 #wrapper { padding: 5px; background-color: yellow; margin: 0; } #left { float :left; width: 195px; border: 1px solid; } #right { f

几天来，我一直在努力自学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>


洛雷姆·伊普苏姆（Lorem ipsum）是一位杰出的艺术家。
jnvfr
乌布雷

背景色直到包装的末尾才到达。添加“overflow:hidden；”后，它在FF中正常工作，但问题仍然存在于IE中

还有人能解释一下在这里添加“溢出：隐藏”的目的吗

任何帮助都将不胜感激。

谢谢。

对于我来说，在IE9中似乎工作得很好：

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

<!DOCTYPE html>

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

容器的高度

#wrapper

对应于没有浮动的最高元素的高度：左|右或

位置：绝对|固定

请记住：浮动框不会展开其父元素

您可以将clearfix添加到

#包装器
/* 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; 
}

非常感谢您的回答，它在两种浏览器上都能完美工作。我有个问题，希望你不介意。内容：“在这里扮演什么角色？”？删除它会让我回到同样的问题。空的生成内容框会为每个CSS创建一个新的子元素。插入可见的内容以查看发生的情况：content:“你好，世界！”例如。明白了，非常感谢你花时间帮助我。谢谢。