<! DOCTYPE html>
<title>ie67li Bottom 3pxBUG </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=gb2312″/>
<style type= "Text/css" >
*{margin:0;padding:0;}
Ul{list-style:none;}
li{border:1px solid gray;overflow:hidden;width:120px;}
Li Span{float:left;}
</style>
<body>
<ul id= "List" >
<li><span> Zhang San </span></li>
<li><span> John Doe </span></li>
<li><span> Bachelor </span></li>
<li><span> Liu Blind Six </span></li>
</ul>
</body>
：
The following are the conditions that raise this bug:
Necessary:
The child element of Li is set to float (for example: span in this example has left float set)
Sufficient
(IE6/7) Li sets one of the width, height, and zoom (for example: Li in this article has width set)
(IE7 only) Li set one of Padding-top, Padding-bottom, Margin-top, Margin-bottom
Solution:
Programme I
#list Li set Clear:left|both, #list Li Cannot set width, height, zoom.
Programme II
#list Li set float:left, #list Li can set width, height, zoom.
#list Li set Clear:left|both, #list Li Cannot set width, height, zoom.
Programme III
Set vertical-align:top|middle|bottom for span in Li
ie6| IE7 Li Bottom 3px pitch bug
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
