IE 7/8/9上奇怪的CSS问题

Question

I've got a website that I started laying out. 我有一个开始布局的网站。 The problem is in the footer_internal_box and footer_box_bottom . 问题出在footer_internal_box和footer_box_bottom 。 Even though the box_bottom is in a separate div section after the internal_box, it sits at the bottom of the internal_box . 即使box_bottom在internal_box后的一个单独的div部分，它坐落在底部internal_box 。 If I alter the height of the footer_box_bottom it also alters the size of footer_internal_box . 如果我更改footer_box_bottom的高度，它也会更改footer_internal_box的大小。

It works in Firefox, however I have found a way to fix it, I just don't understand why. 它可以在Firefox中运行，但是我找到了一种解决方法，我只是不明白为什么。

If I put <div></div> before the <div id="footer_box_bottom"> </div> line, then it all works as expected. 如果将<div></div>放在<div id="footer_box_bottom"> </div>行的前面，则所有操作<div id="footer_box_bottom"> </div>预期进行。 Now I can leave that in there, but i'd like to know why this would happen. 现在我可以把它留在那里，但我想知道为什么会这样。 The footer_box_bottom div should have no effect on the internal_box . footer_box_bottom div对internal_box无效。

Below is the code, reset.css and layout.css. 下面是代码reset.css和layout.css。 The text.css is blank at present. 目前text.css为空白。

Many thanks! 非常感谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/text.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="container">
    <div id="header_box">
        <img src="images/logo.png" width="172" height="174" border="0" id="header_logo" />
        <div id="header_details_box">
        </div>
        <div id="menu_box">
        </div>
    </div>
    <div id="mainpage_box">
        <div id="mainpage_content">
            blah<br/>
        </div>
        <div id="mainpage_box_bottom">&nbsp;</div>
    </div>
    <div id="footer_box">
        <div id="footer_box_top">&nbsp;</div>
        <div id="footer_internal_box">
            <div id="footer_fade">
                <div id="footer_content">
                    blah<br/>
                </div>
            </div>
        </div>
        <div id="footer_box_bottom">&nbsp;</div>
    </div>
</div>
</body>
</html>

The reset.css is as follows reset.css如下

@charset "utf-8";

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
 }
a img, :link img, :visited img {
      border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
    content: "";
}

And the layout.css is 而layout.css是

body
{
background-image:url(../images/header_bg.jpg);
background-repeat:repeat-x;
background-color: #F2F2F2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.clear
{
clear:both;
}

#container
{
width: 970px;
margin: auto;
position: relative;
top: 0px;
left: 0px;
}

#header_box
{
width: 100%;
position: relative;
top: 0px;
left: 0px;
}

#header_details_box
{
width: 100%;
height: 165px;
}

#header_logo
{
position: absolute;
top: 17px;
left: 0px;
}

#menu_box
{
width: 100%;
height: 38px;
}

#mainpage_box
{
width: 100%;
}

#mainpage_content
{
padding-left: 20px;
padding-right: 20px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}

#mainpage_box_bottom
{
width: 970px;
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}

#footer_box
{
width: 100%;
}

#footer_internal_box
{
padding-left: 10px;
padding-right: 10px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}

#footer_box_top
{
height: 11px;
background-image:url(../images/mainbox_top.png);
background-repeat: no-repeat;
background-position: top left;
}

#footer_box_bottom
{
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}

#footer_fade
{
background-image: url(../images/bottombox_fade.png);
background-repeat: repeat-x;
background-position: bottom left;
background-color: #ffffff;
}

#footer_content
{
padding: 10px;
}

Answer 1

The reason for this is simple, actually. 实际上，这样做的原因很简单。 A <div> is supposed to be a division on a page, a separate section of content presentation. <div>应该是页面上的一个分区，是内容表示的单独部分。 This is actually described in the W3C standards for what a <div> represents. 实际上，在W3C标准中对<div>表示的内容进行了描述。 This, however, was an ambiguous description. 但是，这是一个模棱两可的描述。 This became even more the case when W3C instructed that proper use was to utilize graphical elements for graphical presentation. 当W3C指示正确使用图形元素进行图形表示时，情况更是如此。 Later, the W3C finally clarified that content presentation did not necessarily require content within it, but still maintains that a <div> is a separation of content presentation. 后来，W3C最终澄清了内容表示并不一定需要其中的内容，而是仍然认为<div>是内容表示的分离。 Based on the definition , IE is not incorrect. 根据定义，IE并不正确。

Every browser has dealt with ambiguous specifications in their own way while trying to add their own value as a browser. 每个浏览器都试图以自己的方式处理模棱两可的规范，同时尝试增加自己作为浏览器的价值。 Microsoft's approach toward dealing with the ambiguous definition was to require that some level of content be in the <div> for it to render. Microsoft处理歧义定义的方法是要求<div>包含某些级别的内容才能呈现。 This was based on their extremely literal interpretation of the W3C specification on the element. 这是基于他们对W3C规范对元素的极端字面解释。 Based on the developer need, IE is incorrect. 根据开发人员的需要，IE不正确。 The solution to dealing with the IE is to place a nonbreaking space, as it is not white space, but invisible content. 处理IE的解决方案是放置一个不间断的空间，因为它不是空白，而是不可见的内容。

Currently, the W3C defines the <div> as a grouping element . 当前，W3C将<div>定义为分组元素。 This means that it can tie other elements together to make an attractive or logical structure. 这意味着它可以将其他元素捆绑在一起，形成一个有吸引力的或合乎逻辑的结构。 Your usage of the <div> , while standard, contradicts the W3C definition. 标准使用的<div>用法与W3C的定义相矛盾。 Therefore, this means that any User Agent (browser) may deal with this issue as they deem appropriate, including not rendering it, which may affect the DOM layout entirely, especially in regard to its siblings. 因此，这意味着任何用户代理（浏览器）都可以按照他们认为适当的方式处理此问题，包括不进行呈现，这可能会完全影响DOM布局，尤其是在其同级方面。 The real issue here is that, in regard to the W3C standards-compliance, both are viable solutions. 真正的问题是，就W3C标准而言，这两者都是可行的解决方案。 In regard to Developer standards, IE might want to rethink how they address this issue. 关于开发人员标准，IE可能需要重新考虑它们如何解决此问题。

Important Note: 重要的提示：

This answer merely addresses the "why" and is not for or against any of the organizational entities mentioned above. 该答案仅针对“为什么”，而不是针对或反对上述任何组织实体。 The answer does not advocate one technique or interpretation over another and simply presents the facts. 答案不是提倡一种技术或对另一种技术的解释，而只是陈述事实。 Please, do not use this answer to induce debate with me, the asker or any other contributor on this question. 请不要使用这个答案来引起与我，提问者或其他任何对此问题的贡献者的辩论。

IE 7/8/9上奇怪的CSS问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-10-22 20:00:19

IE 7/8/9上奇怪的CSS问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-10-22 20:00:19

解决方案1
1 已采纳 2011-10-22 20:00:19