0
我有一個網站，我開始佈局。問題出在footer_internal_box和footer_box_bottom。儘管box_bottom位於internal_box後面的獨立div部分，但它位於internal_box的底部。如果我改變footer_box_bottom的高度，它也會改變footer_internal_box的大小。IE 7/8/9上奇怪的CSS問題
它在Firefox中工作，但我找到了解決方法，我只是不明白爲什麼。
如果我把<div></div>放在 行之前，那麼它一切都按預期工作。現在我可以把它留在那裏，但我想知道爲什麼會發生這種情況。 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"> </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>
的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;
}
雖然這也許是真的，但它是主要的之一，所以我確實需要確保網站的作品。我有興趣看看它是一個渲染錯誤還是與我的CSS問題。 –
和jsfiddle呢？ – SergeS