我要疯了,不知何故,在我页面中的所有图像下方都有一个空白,代码中不存在一个空白。甚至 Firebug 也看不到它,但 Firefox 和 Safari 正在渲染它——即使根本没有 CSS!
这在我以前从未发生过……!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="sidebar">
<img src="images/logo.png" id="logo" />
<ul id="menu">
<li class="menu1">Main</li>
<li class="menu1">System</li>
<li class="menu1">View</li>
<li class="menu1">Policy</li>
</ul>
<div id="sidebar_bottom"></div>
</div>
<div id="main_content"></div>
<div class="clear"></div>
</div>
</body>
</html>
body{
background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
width:864px;
margin: 8px auto 0 auto;
}
#sidebar{
/*width:139px;*/
float: left;
}
#sidebar_bottom{
height:10px;
background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
margin-bottom: 2px;
}
#sidebar #menu{
background: #f2f2f2;
border: 0 1px solid #cecece;
margin: 0;
list-style: none;
}