CSS bug in IE6

1. Use doctype
You should always use doctype for the header of each html file, and we recommend using the strict version, for example:

<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> or, for xhtml:

<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> The most tricky thing you need to handle is that ie6 enters the quirks mode-it's weird enough.

2. Set position: relative
Setting an element as "position: relative" can solve many problems, especially when you encounter hidden or strange alignment boxes. Obviously, you need to be very careful, because the subnode that is absolutely located may be located again.

3. Set the floating element to display: inline.
Floating elements with the margin attribute may cause the famous ie6 double margin problem. For example, you specify the margin-left as 5px for an element, but ie6 actually shows 10 px ." Display: inline will solve this problem, although this is not necessary, your css tutorial is still valid.

4. Set an element to haslayout.
Many rendering problems of ie6 (and ie7) can be solved by setting haslayout of elements. This is an internal ie attribute (ie hidden. For more information about haslayout, see here) 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, setting haslayout may also be required.

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.

5. 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: <! -- [If! Ie]> Webpage design... <! [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 .)

6. Only the <a> label is used on the clickable and hover elements.
Ie6 only recognizes the css hover effect on the tag.

You can also use them in components based on webpage special effects to control them so that they can maintain the operability of the keyboard. There are some alternative options, but <a> labels are more reliable than other solutions.

7. 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:

# Element {min-height: 20em; height: auto! Important;/* all browsers understand this code */height: 20em; /* ie6 incorrect use of this value/*} ie6 does not understand min-height and uses 20em to overwrite "auto" height. However, if the content requires more space, it automatically increases the height.

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

# Element {min-height: 20em; height: 20em;}/* ie6 ignore the following code */# element [id] {height: auto;} 8. Avoid percentage unit
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:

Body {margin: 2% 0! Important; margin: 20px 0;/* ie6 only */} 9. 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.