我要去香蕉，在页面中所有图像的下方都存在一个空白，在代码中没有空白。
即使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;
}
最佳答案
实际上这并不少见。这是因为图像是内联元素，因此在图像底部(位于文本的基线)和文本行的底部之间有一些空间。
最简单的解决方案是仅使用display:block;将图像转换为块元素。使用float:left;或float:right; float 图像也可以将其变成块元素，因此也可以使用。
调整vertical-align，font-size和line-height之类的属性也可能会影响距离，但它的鲁棒性并不足以消除效果。在某些情况下它可能仍会出现。
相关问题:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue