IE6 IE7 firefox li spacing problem under multiple browsers Page 1/2_Experience exchange

today xiaolei mentioned a problem of blank line spacing in li under ie5. let’s test it below.
create a simple html test file and test the ulli tag below.

the code is as follows:

<ul>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
</ul>

test 1, define css as the following code, the effect is as follows:

body{font-size:12px;margin:0}  
ul{list-style:none;margin:0;padding:0;width:120px;}  
ul li{background:green;height:20px;}  
ul li a{color:#fff;padding:0 0 0 10px;}

it was found that there is a blank space on the left side under ie5 and ie5.5, and under ie5, the line spacing between li is blank, as shown below

test 2, define css as the following code:

body{font-size:12px;margin:0}   
ul{list-style:none;margin:0;padding:0;}   
ul li{background:green;height:20px;width:120px;}   
ul li a{color:#fff;padding:0 0 0 10px;}

compared with test 1, only width:120px; is placed from the definition of ul to the definition of li, which solves the problem of blank space on the left side of ie5 and ie5.5. there is still a gap between the li's of ie5, as shown below:

test 3, define css as the following code, (best way to write)

body{font-size:12px;margin:0}   
ul{list-style:none;margin:0;padding:0;}   
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}   
ul li a{color:#fff;padding:0 0 0 10px;}

compared with test two, add vertical-align: bottom to the definition of li. it works normally under ie5. the blank line spacing between li disappears and the effect is the same in each browser, as shown below:

summary
1. how to solve the problem of li producing blank line spacing under ie5: if li defines the width, then you need to define vertical-align: bottom in li.
2. it is best not to define the width in ul, but in li or the div outside ul.
3. the best way to write li is to write height and width inside li, as well as vertical-align: bottom; (for ie5/win bug), or add a layer of div outside ul and define the width. then there is no need to define width and vertical-align: bottom; in li, and the display will be normal (no blank line spacing will be generated under ie5), but the height still needs to be defined.

the above is the content of page 1/2_experience exchange on ie6 ie7 firefox li spacing issue under multiple browsers. for more related content, please pay attention to the php chinese website (www.php.cn)!