Question

以下是一个HTML页面示例，其中包含页眉和页脚以及包含另一个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中工作正常）。页脚不应受内容的影响。有谁知道这里发生了什么以及如何解决这个问题？

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

Answer 1

这绝对是一个惊人的问题！它甚至可以在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容器中的内容的细节，所以额外的填充可能是一个问题，角落上留下的10px与容器上的左边距对齐。

Answer 2

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

在IE7中，div的宽度受另一个div的内容的影响

2 个答案: