即使经过我用css和html编写的许多行之后,css行为仍然让我感到惊讶 - 这是一种糟糕的方式.
我正在为一个朋友组建一个示例网站,向他展示如何构建他的布局,但Firefox 3.0.5和IE8在我的#header,#content和#footer-div之间创造了边缘.如果我在IE7模式下切换,边距消失.
CSS:
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
#page {
background-image: url('bg_gradiant.png');
background-repeat: repeat-y;
width: 950px; /* 770px + 2 * 90px; */
margin: 0 auto;
padding-left: 90px;
}
#header {
width: 770px;
margin: 0;
padding: 0;
}
#header #row1 {
background-color: #9ab3ba;
height: 50px;
}
#header #row2 {
background-color: #517279;
height: 50px;
}
#content {
width: 770px;
background-color: #d7e9ed;
}
#footer {
background-color: #5eb6cc;
width: 770px;
height: 150px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Test</title>
</head>
<body>
<div id="page">
<div id="header">
<div id="row1"></div>
<div id="row2"></div>
</div>
<div id="content">
<p style="height: 600px">Beware of the Content</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
您可以在此处查看此页面:https://codepen.io/lx-s/pen/eRrOpL
浏览IE Developer Tools和Firebug告诉我他们没有为这些div设置默认边距值,但正如人们所看到的,他们就在那里.希望你能给我一个如何摆脱它们的暗示 - 它让我疯狂.
提前致谢!