ie6中li插入圖片后下方有空隙(經典bug）多種解決方法
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" 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
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
liimg src="https://www.questions.com.cn/dnjc/images/cat.jpg" width="248" height="162" //li
/ul
/body
/html
效果如下：
通過上圖，我們可以看出在 ie6 下 li 中圖片下方有大約 2px 的空隙，即使我們給 li 寬高和圖片一樣也米有用 。下面就介紹幾種解決方法：
方法一：
給 li 加上 overflow:hidden;
方法二：
給 ul 加上 font-size:0;
方法三：
設置 img 的 display 值為 block 。
方法四：
設置 img 的 vertical-align 的值為 top/middle/bottom 。
