Shulou(Shulou.com)06/03 Report--

How to solve the Bug of 4px gap at the bottom of li in IE6/IE7, many novices are not very clear about this, in order to help you solve this problem, the following small series will explain in detail for everyone, people who have this need can learn, I hope you can gain something.

When there is a float in a child element of li, a bug with a 4px gap is created below the element in IE6/IE7.

XHTML

The code is as follows:

vapour

Baidu

Taobao

thunder

After testing, it was found that the floating of the child elements of li is a necessary condition for this bug to occur. The sufficient and necessary condition for this bug to occur is that the child elements of li float and li sets one of the following CSS properties: width, height, zoom, padding-top, padding-bottom, margin-top, margin-bottom.

Knowing the conditions for this bug, there is a solution:

Method 1

#list div set clear:left| Both, in this case #list li can not set width, height, zoom.

Method 2

#list li Set float:left, then #list li can set width, height, zoom.

#list li Set clear:left| Both, in this case #list li can not set width, height, zoom.

Method 3

This Bug in IE6/IE7 can be found by setting vertical-align:top to the div in li| middle| bottom solved. That's weird, just add that vertical-align is one of three.

The code is as follows:

Bug at bottom 3px of li in IE6/IE7

ul { margin: 0; padding: 0; list-style: none; }

hr { clear: both; }

.list li { width: 420px; }

.list div { float: left; width: 400px; height: 24px; background: red; }

.v-top div { vertical-align: top; }

.v-middle div { vertical-align: middle; }

.v-bottom div { vertical-align: bottom; }

vapour

Baidu

Taobao

thunder

vapour

Baidu

Taobao

thunder

vapour

Baidu

Taobao

thunder

vapour

Baidu

Taobao

thunder

Did reading the above help you? If you still want to have further understanding of related knowledge or read more related articles, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.