0
我们在制作页面时，经常有可能碰到这样的设计：
图一
图一的布局代码如下：
<ul>
<li><img src=”pic1.jpg” /></li>
<li><img src=”pic2.jpg” /></li>
<li><img src=”pic3.jpg” /></li>
<li><img src=”pic4.jpg” /></li>
</ul>
由于图片的宽高尺寸不确定，所以不能固定其宽高属性，我们编写如下样式：
li {
list-style: none;
border: 1px solid #333;
padding: 2px;
float: left;
margin-right: 14px;
}
结果除了 IE8 以外，在 IE6、IE7、Firefox 这三个浏览下显示效果都不正常，底下多出来了 4px，如图二所示：
- 图二
解决办法有：
1. 为 li 内的 img 添加图片的垂直对齐方式为：顶部（或底部）；
li img { vertical-align: top; } 或 li img { vertical-align: bottom; }
2. 设置 li 内的 img 显示为块；
li img { display: block; }
除此以外，还有其他的二种方法，如：给 ul 设置 font-size:0; 或者给 img 设置 margin-bottom: -4px; 也可以解决问题，但由于这二种 CSS 样式有可能会影响其它元素，故不推荐使用。
