ie6中li插入圖片後下方有空隙(經典bug）多種解決方法
阿新 • • 發佈：2019-01-02
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。
首先附上程式碼：
複製程式碼 程式碼如下:
<!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。