日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

ie6中l(wèi)i插入圖片后下方有空隙(經(jīng)典bug）多種解決方法

云知道

ie6 中 li 插入圖片后下方有空隙 bug，這是 ie6 的有一個經(jīng)典 bug 。解決該 bug 有很多方法，今天我整理了下，共4種方法，給大家分享下 。
首先附上代碼：

復(fù)制代碼代碼如下:
!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="/images/defaultpic.gif" //li
liimg src="/images/defaultpic.gif" //li
liimg src="/images/defaultpic.gif" //li
liimg src="/images/defaultpic.gif" //li
liimg src="/images/defaultpic.gif" //li
liimg src="/images/defaultpic.gif" //li
/ul
/body
/html

效果如下：

ie6中l(wèi)i插入圖片后下方有空隙(經(jīng)典bug）多種解決方法



通過上圖，我們可以看出在 ie6 下 li 中圖片下方有大約 2px 的空隙，即使我們給 li 寬高和圖片一樣也米有用 。下面就介紹幾種解決方法：
方法一：
給 li 加上 overflow:hidden;
方法二：
給 ul 加上 font-size:0;
方法三：
設(shè)置 img 的 display 值為 block 。
方法四：
設(shè)置 img 的 vertical-align 的值為 top/middle/bottom 。

    推薦閱讀