li标签包含img的问题

我们在制作页面时，经常有可能碰到这样的设计：

li

 

图一

 

图一的布局代码如下：

 

<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 样式有可能会影响其它元素，故不推荐使用。