看看这个页面.右边的图像应该在它们的div中居中.但如果仔细观察,顶部有一个约3像素的小边框.如果你禁用overflow: hidden(通过firebug或IE8等效),它会突出底部.
HTML是这样的:
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
而CSS,这个:
div.small
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
overflow:hidden;
margin:5px;
background-color: #C0C0C0;
float:left;
}
div.small img
{
vertical-align: middle;
max-width:100px;
max-height:100px;
display: inline;
}
造成这种神秘差距的原因是什么？我检查了边距和填充,它们似乎不是问题.
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}<div class="item-list">
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
</div>只有在win ie6中,它们之间的差距a 仍然是退出,风格letter-spacing:-0.3em在删除时会有效a { letter-spacing:0 }
为什么？我可以弄清楚这个问题吗？
我无法消除IE7中列表项之间的差距.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="base.css" />
</head>
<body>
<ul>
<li>
<div>row 1.1</div>
<div>row 1.2</div>
</li>
<li>
<div>row 2.1</div>
<div>row 2.2</div>
</li>
<li>
<div>row 3.1</div>
<div>row 3.2</div>
</li>
</ul>
</body>
</html>
CSS:
ul
{
padding: 0px;
margin: 0px;
}
li
{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
li:first-child
{
border-top: 1px solid black;
}
li …这里的元素之间出现了奇怪的差距.我宁愿让他们齐心协力.知道如何解决这个问题吗？