Eight tips for IE6 bug

Document directory

• 1. Set position: relative
• 2. Set the floating element to display: inline.
• 3. Set an element to haslayout.
• 4. Fixed the duplicate text bug.
• 5. Use! Important or advanced selector to distinguish IE6
• 6. Avoid percentage units
• 7. Early testing and continuous testing
• 8. refactor your code

1. Set position: relative

Setting an element as "position: relative" can solve many problems, especially when you encounter hidden or strange alignment boxes.

2. Set the floating element to display: inline.

Floating elements with the margin attribute may cause the IE6 double margin problem. For example, if you specify the margin-left as 5px for an element, the IE6 is actually 10 PX ." Display: inline will solve this problem. Of course, this is not the only method.

3. Set an element to haslayout.

Many rendering problems of IE6 (and IE7) can be solved by setting haslayout of elements. Used to determine how the content is laid out and located relative to other elements. If you need to set an inline element (such as a link) as a block element, or apply transparent effects.

The simplest way to set haslayout is to set a height or width for CSS (Zoom can also be used, but Zoom is not part of the CSS standard ). We recommend setting the actual size, but the problem is that this is unrealistic. You may need to use "height: 1% ". If no height is set for the parent element, the actual height of the element is not affected, and haslayout is enabled at this time.

4. Fixed the duplicate text bug.

Complex la s can trigger the final characters of floating elements, which may occur in the bug of clearing elements. There are several solutions, some of which are perfect, but it is also necessary to do some repeated tests:

• Make sure that all elements use "display: inline ;"
• Use a "margin-Right:-3px;" on the last element ;"
• Use a condition annotation for the last entry of the floating element, for example:

  1	<!--[if !IE]>Put your commentary in here...<![endif]-->

• Use an empty DIV in the last element of the container (it is also necessary to set the width to 90% or similar width .)

5. Use! Important or advanced selector to distinguish IE6

Writing feasible code especially for IE6 is still possible without the traditional hack or conditional CSS in extra files. For example, the minimum height can be defined using this Code:

12345

# Element {Min-Height: 20em; Height: Auto! Important;/* all browsers understand this Code */height: 20em;/* incorrect use of this value in IE6 /*}

IE6 does not understand Min-height and uses 20em to overwrite the "Auto" height. However, if the content requires more space, it will automatically increase the height.

Another optional method is to use an advanced selector, such as e.g.

123456

#element { min-height: 20em;height: auto !important; height: 20em;overflow: visible;}

6. Avoid percentage units

The percentage will confuse IE. Unless you can precisely control the size of each parent element, it is possible to achieve the best prevention. You can go through! Important continues to use the percentage in other browsers, for example:

1234	body { margin: 2% 0 !important; margin: 20px 0; /* IE6 only */}

7. Early testing and continuous testing

Do not test IE6 until your website or application is complete. In this case, the problem may be worse and it will take more time to fix it. If your website can run normally in Firefox and IE6, there will be no problem in other browsers.

8. refactor your code

It often takes longer to fix bugs than to consider a new layout issue. Small changes to HTML and some simple CSS are often more effective. This may mean you have to discard the perfect code, but there will be fewer long-term problems and you will be very clear about how to deal with these problems in the future.

Although IE8 has not fundamentally changed IE, its support for CSS standards has indeed greatly improved. However, even so, we still cannot hope to popularize Internet Explorer 8. This is a very unreliable thing. The stubborn Internet Explorer 6 users may not accept Internet Explorer 8. So we can't ignore IE6 for the last year and a half.