IE6 IE7中li底部4px的Bug

當li的子元素中有浮動（float）時，ie6/ie7中元素的下面會產生4px空隙的bug。

xhtml    

<

ul class
="list"
>
<
li><
div>vapour
div>
li>
<
li><
divdiv
>
li>
<
li><
div>**
div>
li>
<
li><
div>迅雷
div>
li>
ul>

經過測試發現：li的子元素浮動是這個bug產生的必要條件，這個bug產生的充要條件是li的子元素浮動並且li設定了以下css屬性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

知道了這個bug的產生條件，所以解決方法也就有了：

方法1  

#list div設定clear:left|both，這時#list li不能設定width、height、zoom。  

方法2  

#list li設定float:left，這時#list li可以設定width、height、zoom。  

#list li設定clear:left|both，這時#list li不能設定width、height、zoom。  

方法3ie6/ie7的這個bug可以通過給li中的div設定vertical-align:top|middle|bottom解決。太怪異了，只要加上vertical-align的值是三者之一即可。

>ie6/ie7中li底部3px的bug

title

>

<

style

type

="text/css"

>

ul hr

.list li

.list div

.v-top div

.v-middle div

.v-bottom div

style

>

head

>

<

body

>

<

ul class

="list"

>

<

li><

div>vapour

div>

li>

<

li><

divdiv

>

li>

<

li><

div>**

div>

li>

<

li><

div>迅雷

div>

li>

ul>

<

hr />

<

ul class

="list v-top"

>

<

li><

div>vapour

div>

li>

<

li><

divdiv

>

li>

<

li><

div>**

div>

li>

<

li><

div>迅雷

div>

li>

ul>

<

hr />

<

ul class

="list v-middle"

>

<

li><

div>vapour

div>

li>

<

li><

divdiv

>

li>

<

li><

div>**

div>

li>

<

li><

div>迅雷

div>

li>

ul>

<

hr />

<

ul class

="list v-bottom"

>

<

li><

div>vapour

div>

li>

<

li><

divdiv

>

li>

<

li><

div>**

div>

li>

<

li><

div>迅雷

div>

li>

ul>

body

>

html

>

IE6 IE7中li底部4px的Bug

當li的子元素中有浮動 float 時，ie6 ie7中元素的下面會產生4px空隙的bug。xhtml ul class list li div vapour div li li divdiv li li div div li li div 迅雷 div li ul 經過測試發現 li的子元素浮動是...

IE6 IE7中li底部4px空隙的Bug

當li的子元素中有浮動 float 時，ie6 ie7中元素的下面會產生4px空隙的bug。如下 經過測試發現 li的子元素浮動是這個bug產生的必要條件，這個bug產生的充要條件是li的子元素浮動並且li設定了以下css屬性之一 width height zoom padding top padd...

ie6 ie7中li下方有間距

最近在學做導航條，滑鼠放到應用上，正確顯示為 chrome firefox ie9 ie8裡都顯示正確，就360 搜狗，ie6中顯示的li與下乙個li直接有間距有間距，具體如下 解決方案 li設定float left 切身實踐過的 以下是引發此bug的條件 必要條件 li的子元素設定了浮動 例如 l...