我們在制作頁面時，經常有可能碰到這樣的設計：
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 樣式有可能會影響其它元素，故不推薦使用。