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

Source: Internet
Author: User
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 )!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.