ie6 中 li 插入圖片後下方有空隙 bug，這是 ie6 的有一個經典 bug。解決該 bug 有很多方法，今天我整理了下，共4種方法，給大家分享下。
首先附上代碼：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> ul{width:774px;overflow:hidden;margin-left:auto;margin-right:auto;} li{float:left;width:248px;height:162px;display:inline;margin:0 10px 10px 0;background:red;} </style></head><body> <ul> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> <li><img src="images/cat.jpg" width="248" height="162" alt=""/></li> </ul></body></html>
效果如下：
通過，我們可以看出在 ie6 下 li 中圖片下方有大約 2px 的空隙，即使我們給 li 寬高和圖片一樣也米有用。下面就介紹幾種解決方案：
方法一：
給 li 加上 overflow:hidden;
方法二：
給 ul 加上 font-size:0;
方法三：
設定 img 的 display 值為 block。
方法四：
設定 img 的 vertical-align 的值為 top/middle/bottom。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
