当前位置： 文江博客话题详情

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

发布于 2024-12-11 06:09:05 字数 4633 浏览 0 评论 0原文

我已经开始布局一个网站。问题出在 footer_internal_box 和 footer_box_bottom 中。尽管 box_bottom 位于internal_box 之后的单独 div 部分中，但它位于 internal_box 的底部。如果我改变 footer_box_bottom 的高度，它也会改变 footer_internal_box 的大小。

它在 Firefox 中工作，但是我找到了解决它的方法，我只是不明白为什么。

如果我将

放在 之前 线，那么一切都会按预期进行。现在我可以把它留在那里，但我想知道为什么会发生这种情况。 footer_box_bottom div 应该对 internal_box 没有影响。

下面是代码，reset.css和layout.css。 text.css 目前为空。

非常感谢！

<!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>

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: "";
}

，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;
}
原文

I've got a website that I started laying out. The problem is in the footer_internal_box and 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. If I alter the height of the footer_box_bottom it also alters the size of footer_internal_box.

It works in Firefox, however I have found a way to fix it, I just don't understand why.

If I put <div></div> before the <div id="footer_box_bottom"> </div>
line, then it all works as expected. 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.

Below is the code, reset.css and layout.css. The text.css is blank at present.

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"> </div>
    </div>
    <div id="footer_box">
        <div id="footer_box_top"> </div>
        <div id="footer_internal_box">
            <div id="footer_fade">
                <div id="footer_content">
                    blah<br/>
                </div>
            </div>
        </div>
        <div id="footer_box_bottom"> </div>
    </div>
</div>
</body>
</html>

The reset.css is as follows

@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

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;
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

聽兲甴掵 2024-12-18 06:09:05

其实原因很简单。

应该是页面上的一个分区，是内容呈现的一个单独部分。这实际上在 W3C 标准中描述了

所代表的内容。然而，这是一个含糊不清的描述。当 W3C 指示正确使用是利用图形元素进行图形表示时，情况变得更是如此。后来，W3C 最终澄清内容呈现不一定需要内容在其中，但仍然认为

是内容呈现的分离。根据定义，IE 并没有错。

每个浏览器都以自己的方式处理模糊的规范，同时试图增加自己作为浏览器的价值。 Microsoft 处理不明确定义的方法是要求

中包含一定级别的内容才能呈现。这是基于他们对该元素的 W3C 规范的极其字面的解释。基于开发者的需要，IE是不正确的。处理 IE 的解决方案是放置一个不间断的空格，因为它不是空白，而是不可见的内容。

目前，W3C 将

定义为 分组元素。这意味着它可以将其他元素联系在一起以形成有吸引力或合乎逻辑的结构。您对

的使用虽然是标准的，但与 W3C 定义相矛盾。因此，这意味着任何用户代理（浏览器）都可以按照他们认为适当的方式处理此问题，包括不渲染它，这可能会完全影响 DOM 布局，尤其是对其兄弟姐妹而言。这里真正的问题是，就 W3C 标准合规性而言，两者都是可行的解决方案。关于开发者标准，IE 可能需要重新考虑如何解决这个问题。

重要提示：

此答案仅解决“原因”，并不支持或反对上述任何组织实体。答案并不提倡一种技术或解释优于另一种技术或解释，而只是陈述事实。请不要使用此答案来引发与我、提问者或任何其他贡献者就此问题进行的辩论。

The reason for this is simple, actually. A <div> is supposed to be a division on a page, a separate section of content presentation. This is actually described in the W3C standards for what a <div> represents. 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. 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. Based on the definition, IE is not incorrect.

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. This was based on their extremely literal interpretation of the W3C specification on the element. Based on the developer need, IE is incorrect. The solution to dealing with the IE is to place a nonbreaking space, as it is not white space, but invisible content.

Currently, the W3C defines the <div> as a grouping element. 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. 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. The real issue here is that, in regard to the W3C standards-compliance, both are viable solutions. In regard to Developer standards, IE might want to rethink how they address this issue.

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.

回复 原文
~没有更多了~

关于作者

我的鱼塘能养鲲

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文