IE7 中 div 的宽度受另一个 div 内容的影响答案

【问题标题】：Width of div is affected in IE7 by contents of another divIE7 中 div 的宽度受另一个 div 内容的影响
【发布时间】：2011-11-26 11:29:34
【问题描述】：

下面是一个 HTML 页面示例，该页面由页眉和页脚以及一个 div 组成，该 div 包含另一个包含一些内容的 div：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Testing 123</title>
    <link rel="stylesheet" href="css/testing.css">
</head>
<body>
    <div id="main_body">
        <div id="header"></div>
        <div id="content_container">
            <div id="content">
                Some text<br>
            </div>
        </div>
       <div id="footer"></div>
    </div>
</body>
<html>

这是css：

* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
z-index: 10;
font-family: Arial;
font-size: 20px;
text-decoration: none;
text-align: left;
}
html, body {
height: 100%;
background-color: rgb(255, 255, 255);
}
#main_body {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 20px 0px 20px;
}
#header {
position: absolute;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background-color: rgb(40, 40, 40);
}
#content_container {
padding: 80px 10px 50px 10px;
}
#content {
padding: 0px 4px 0px 4px;
position: relative;
}
#corner_top_left {
position: absolute;
width: 7px;
height: 7px;
top: 0;
left: 0;
background-color: rgb(40, 40, 40);
}
#footer {
position: absolute;
bottom: 20px;
left: 0px;
height: 20px;
width: 100%;
background-color: rgb(40, 40, 40);
}

请注意，我还没有使用样式corner_top_left。我想为内容提供漂亮的圆角。我知道有很多不同的方法可以实现这一目标。我选择有一个相对位置的容器，您可以在其中设置绝对定位的小角 div。这种方法对我来说很好用，但在这个特定的例子中，在 IE7 中有一个非常奇怪的效果，我无法解释。

观察将 content_top_left div 添加到示例时会发生什么，如下所示：

....
<div id="header"></div>
<div id="content_container">
    <div id="content">
        <div id="corner_top_left"></div>
        Lots of text<br>
    </div>
</div>
<div id="footer"></div>
....

由于某种原因，现在调整了页脚的宽度（它更短了）。我不知道为什么在 IE7 中会发生这种情况（在 FF 中工作正常）。页脚不应受到内容的影响。有谁知道这里发生了什么以及如何解决这个问题？

编辑：我稍微更改了示例，使其更类似于我当前的网站。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

尝试将 #content_container 上的填充从 padding: 0 10px 0 10px; 设置为 padding:0。它解决了 IE7 中的问题，但我在 IEtester 中运行它。

【讨论】：

也将 zoom:1 添加到提到的同一个容器中可以解决问题。

【解决方案2】：

真是一个惊人的问题！它甚至适用于 Quirks 模式，但不适用于 IE7 标准。

我首先关注#content 边距，但更改它会产生不同的结果，然后我移到页脚但没有多大成功，尝试了#content_top_left 并没有。然后我返回到#content 并消除了任何左/右页边距。

虽然您可以解决此问题，但它不会像您预期的那样干净。代码如下：

#content 
{
    margin: 80px 0 50px 0;
    position: relative;
    padding: 0 10px 0 10px;
}
#content_top_left 
{
    position: absolute;
    width: 7px;
    height: 7px;
    top: 0;
    left: 10px;
    background-color: rgb(40, 40, 40);
}

我不知道您在#content 容器中实现背景和类似内容的详细信息，因此额外的填充可能是个问题，角落左侧的 10 像素与容器上的左侧填充对齐。

【讨论】：

感谢 F.Aquino！我稍微更改了示例，使其与我当前的项目更相似。我添加了一个带圆角的新 div，同样的事情又发生了。
顺便说一句。我看到我在最初的帖子中犯了一个错误：我为 #content_container 使用了边距，但它必须是填充才能使示例在 FF 中工作。您的解决方案使用了在 FF 中不起作用的填充和边距。