Multi-browser IE6 IE7 Firefox li pitch problem 1th/2 page _ Experience Exchange

Today Ray mentioned a IE5 under Li to produce blank line spacing, the following to test.
Create a simple HTML test file and test the UL li tag below.

The code is as follows:

<ul>   <li><a href= "#" > Menu one </a></li>   <li><a href= "#" > Menu one </a ></li>   <li><a href= "#" > Menu one </a></li>   <li><a href= "#" > Menu One < /a></li>   <li><a href= "#" > Menu one </a></li>   <li><a href= "#" > Menu single </a></li>   </ul>

Test one, define the 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;p adding:0 0 0 10px;}

IE5 and IE5.5 are found to have white space on the left, and under IE5, the spacing between Li is blank, as

Test two, define the 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;p adding:0 0 0 10px;}

Compared to the test, just the width:120px, from the definition of UL to the definition of Li, to solve the problem of IE5 and IE5.5 left blank, and IE5 between the Li spacing is still there, such as:

Test three, the definition of CSS for the following code, (best notation)

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;p adding:0 0 0 10px;}

And test two comparison, in the definition of Li plus vertical-align:bottom;ie5 normal, the white space between Li disappears, to obtain the effect of each browser, such as:

Summarize
1. Solve Li's method of producing blank line spacing under IE5: If Li defines the width, then the vertical-align:bottom needs to be defined in Li.
2. The width is best not defined in the UL, defined in the LI or UL outer Div.
3. The best way to write Li, Li is to write height and width, as well as Vertical-align:bottom, (for Ie5/win bug), or outside the UL add a layer of Div, and define the width, So in Li does not have to define the width and the vertical-align:bottom, but also displays the normal (IE5 does not produce the blank line spacing), but the height still wants to define.

Above is the multi-browser IE6 IE7 Firefox li pitch problem 1th/2 page _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

