IE6IE7firefoxli padding in multiple browsers page 1/2 _ experience exchange

IE6IE7firefoxli spacing in multiple browsers today, Xiao Lei mentioned that li in ie5 produces a blank line spacing problem. Let's test it below.
Create a simple HTML test file and test the ul li tag.

The Code is as follows:

 
 
   
  
  
Menu 1
   
  
  
Menu 1
   
  
  
Menu 1
   
  
  
Menu 1
   
  
  
Menu 1
   
  
  
Menu 1
   
 
 

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;}

The left side of IE5 and IE5.5 is blank, and the line spacing between LI is blank under IE5, as shown in figure
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, we only place width: 120px; from ul definition to li definition, which solves the left-side blank of IE5 and IE5.5, the li spacing between IE5 still exists, such:

Test 3: Define css as the following code (best syntax)

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 2, vertical-align: bottom; ie5 is normal in the definition of li, and the blank line spacing between li disappears, achieving the same effect as that of various browsers, such:

1. Solve the Problem of li generating blank line spacing under IE5: If li defines the width, we need to define vertical-align: bottom in li.
2. The width should not be defined in UL, but in DIV of LI or UL outer layer.
3. the best way to write LI is to write height and width in li, as well as vertical-align: bottom; (for ie5/win bug), or add a layer of p to ul, and define the width, so the li does not need to define the width and vertical-align: bottom;, it also shows normal (IE5 does not produce blank line spacing), but the height must be defined.

The above is the content of experience exchange on page 1/2 of the firefox li spacing issue in IE6 IE7 in multiple browsers. For more information, see PHP Chinese Network (www.php1.cn )!