欧美日韩国产一区二区|qovd片|小明个人发布看看|小浪货你夹真紧水又多|老头把我添高潮了A片故|99热久久精品国产一区二区|久久久春色AV

  1. 首頁(yè) > 生活經(jīng)驗(yàn) > >

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

ie6 中 li 插入圖片后下方有空隙 bug ， 這是 ie6 的有一個(gè)經(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="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中l(wèi)i插入圖片后下方有空隙(經(jīng)典bug）多種解決方法


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

相關(guān)經(jīng)驗(yàn)推薦