[Z] solutions to nine common IE bugs for Web programmers

 

Editor's comment: Web programmers and designers often suffer for the strange performance of their CSS in IE, and IE is recognized as the poison of Web programmers. This article summarizes the nine most common bugs in IE and their solutions.

This article is from coolshell.cn's article 9 most common IE Bug and Its fix, which has changed some mistakes.

Internet Explorer-Web programmer's poison. More than 60% of the development time on IE is spent fighting with IE bugs, causing a serious reduction in your development productivity. The following is a tutorial to show you the most common bugs on Internet Explorer and how to solve them.

1. center layout

Creating a CSS definition places an element in the middle. It may be something that every Web developer will do. The simplest way is to addMargin: auto;However, many strange behaviors may occur in IE 6.0. Let's look at an example.

   1. #container{ 
   2.     border: solid 1px #000;  
   3.     background: #777;  
   4.     width: 400px;  
   5.     height: 160px;  
   6.     margin: 30px 0 0 30px;  
   7. } 
   8.  
   9. #element{ 
  10.     background: #95CFEF;  
  11.     border: solid 1px #36F;  
  12.     width: 300px;  
  13.     height: 100px;  
  14.     margin: 30px auto;  
  15.  
  16. } 

The following is the expected output:

However, IE gives us the following output:

This should be from IE 6 to margin.AutoNo correct settings. Fortunately, this is easily corrected.

Solution

The simplest way is to useText-align: centerAttribute.Text-align: left.

   1. #container{ 
   2.     border: solid 1px #000;  
   3.     background: #777;  
   4.     width: 400px;  
   5.     height: 160px;  
   6.     margin: 30px 0 0 30px;  
   7.     text-align: center;  
   8. } 
   9.  
  10. #element{ 
  11.     background: #95CFEF;  
  12.     border: solid 1px #36F;  
  13.     width: 300px;  
  14.     height: 100px;  
  15.     margin: 30px 0;  
  16.         text-align: left;  
  17.  
  18. } 

2. stair Effect

Almost all Web developers use list to create navigation bars. The following code may be used:

   1. <ul> 
   2.     <li><a href="#"></a></li> 
   3.     <li><a href="#"></a></li> 
   4.     <li><a href="#"></a></li> 
   5. </ul> 

   1. ul { 
   2.     list-style: none;  
   3. } 
   4.  
   5. ul li a { 
   6.     display: block;  
   7.     width: 130px;  
   8.     height: 30px;  
   9.     text-align: center;  
  10.     color: #fff;  
  11.     float: left;  
  12.     background: #95CFEF;  
  13.     border: solid 1px #36F;  
  14.     margin: 30px 5px;  
  15. } 

A browser that complies with the standards will look like this:

But IE is like this:

The following are two solutions:

Solution 1

Set the float attribute of the li component.

ul li { float: left; }

Solution 2

SetDisplay: inlineAttribute.

   1. ul li { 
   2.     display: inline 
   3. } 

3. Blank Space of float Elements

See the following code:

   1. #element{ 
   2.     background: #95CFEF;  
   3.     width: 300px;  
   4.     height: 100px;  
   5.     float: left;  
   6.     margin: 30px 0 0 30px;  
   7.     border: solid 1px #36F;  
   8. } 

The expected result is:

The result of IE is:

Solution

SetDisplay: inlineAttribute can solve the problem.

   1. #element{ 
   2.     background: #95CFEF;  
   3.     width: 300px;  
   4.     height: 100px;  
   5.     float: left;  
   6.     margin: 30px 0 0 30px;  
   7.     border: solid 1px #36F;  
   8.     display: inline;  
   9. } 

4. The micro height cannot be set.

We found thatHeight: XXpxThis attribute cannot be set to a relatively small height. The following is an example (note that the height is 2px ):

   1. #element{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 300px;  
   5.     height: 2px;  
   6.     margin: 30px 0;  
   7. } 

Expected result: the 2px component is added with a 1px border.

IE result:

Solution 1

The cause of this BUG is very simple. IE does not allow the component height to be smaller than the font height. Therefore, the fix below is to set the font size.

   1. #element{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 300px;  
   5.     height: 2px;  
   6.     margin: 30px 0;  
   7.         font-size: 0;  
   8. } 

Solution 2

But the best solution is to useOverflow: hidden.

   1. #element{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 300px;  
   5.     height: 2px;  
   6.     margin: 30px 0;  
   7.         overflow: hidden 
   8. } 

5. Cross-outbound border

This BUG is ugly. When the parent component is usedOverflowOfAutoAttribute, and add related components in it. You will see that the components in it will be crossed out. The following is an example:

   1. <div id="element"><div id="anotherelement"></div></div> 

   1. #element{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 300px;  
   5.     height: 150px;  
   6.     margin: 30px 0;  
   7.     overflow: auto;  
   8. } 
   9.  
  10.  #anotherelement{ 
  11.     background: #555;  
  12.     width: 150px;  
  13.     height: 175px;  
  14.     position: relative;  
  15.     margin: 30px;  
  16. } 

Expected results:

IE result:

Solution

Set position: relative; Attribute

   1. #element{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 300px;  
   5.     height: 150px;  
   6.     margin: 30px 0;  
   7.     overflow: auto;  
   8.         position: relative;  
   9. } 

6. Fixing the Broken Box Model

Internet Explorer misinterpret the "box model", which may be the most unforgivable thing. The semi-standard IE 6 browser avoided this problem, but this problem still occurs because IE runs in "weird mode.

Two Div elements. One has a fix, and the other does not. The sum of height, width, and padding is different. Is corrected above, but not below.

Solution

I believe that there is no need for explanation or demonstration, which should be understood by most people. Below is a pretty weird Solution

   1. #element{ 
   2.     width: 400px;  
   3.         height: 150px;  
   4.     padding: 50px;  
   5. } 

The above definition is:

   1. #element { 
   2.     width: 400px;  
   3.     height: 150px;  
   4.    \height: 250px;  
   5.    \width: 500px 
   6. } 

Yes, you need to add padding to the original length and width. However, this fix only applies to IE's "weird mode", so you don't need to worry about problems in IE6's normal mode.

7. Set min-height and min-width

IE ignores min-height.

Solution 1

This fix is provided by Dustin Diaz. It uses! ImportantThe following is a code snippet:

   1. #element { 
   2.   min-height:150px;  
   3.   height:auto !important;  
   4.   height:150px;  
   5. } 

Solution 2

   1. #element { 
   2.     min-height: 150px;  
   3.     height: 150px;  
   4. } 
   5.  
   6. html>body #element { 
   7.     height: auto;  
   8. } 

8. Misbehaving

The most important thing to use a non-table layout is to use the CSS float element. In many cases, IE6 seems to be in the exploratory phase, and sometimes you will find many strange behaviors. For example, when there are some texts.

Let's take a look at the following example:

   1. <div id="container"> 
   2.     <div id="element">http://net.tutsplus.com/</div> 
   3.     <div id="anotherelement"></div> 
   4.  </div> 

   1. #element, #anotherelement{ 
   2.     background: #95CFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 100px;  
   5.     height: 150px;  
   6.     margin: 30px;  
   7.     padding: 10px;  
   8.     float: left;  
   9. } 
  10.  
  11.  #container{ 
  12.     background: #C2DFEF;  
  13.     border: solid 1px #36F;  
  14.     width: 365px;  
  15.     margin: 30px;  
  16.     padding: 5px;  
  17.     overflow: auto;  
  18. } 

Expected results:

IE result:

You can see the difference.

Solution

There is no good solution to this problem. Only one method is used.Overflow: hidden.

   1. #element{ 
   2.     background: #C2DFEF;  
   3.     border: solid 1px #36F;  
   4.     width: 365px;  
   5.     margin: 30px;  
   6.     padding: 5px;  
   7.     overflow: hidden;  
   8. } 

9. Empty lines in the list project door

Let's take a look at the following example.

   1. <ul> 
   2.  <li><a href="#">Link 1</a></li> 
   3.  <li><a href="#">Link 2</a></li> 
   4.  <li><a href="#">Link 3</a></li> 
   5.  </ul> 

   1. ul { 
   2.     margin:0;  
   3.     padding:0;  
   4.     list-style:none;  
   5. } 
   6.  
   7. li a { 
   8.     background: #95CFEF;  
   9.     display: block;  
  10. } 

Expected results:

IE result:

Fortunately, you can use the following method to solve the problem.

Solution 1

Define height to solve

   1. li a { 
   2.     background: #95CFEF;  
   3.     display: block;  
   4.         height: 200px;  
   5. } 

Solution 2

    li a { 
   1.     background: #95CFEF;  
   2.     float: left;  
   3.         clear: left;  
   4. } 

Solution 3

IsLiAddDisplay: inline.

   1. li { 
   2.     display: inline;  
   3. } 

Conclusion

It is very difficult to tune the UI. It is more difficult to tune a css html interface. It is difficult to tune down a css html interface in IE.