Compatible IE6 FAQ: 10 valid HTML and CSS code

IE6 is still the main browser of domestic users, so as the front-end development of Web pages, inevitably must be compatible with IE6 browser, here are 10 use valid HTML and CSS code repair can be compatible with IE6 common problems.

We know IE will still be popular for some time, but can we still support browsers and avoid hacks and conditional CSS? There are 10 common problems with using valid HTML and CSS code fixes that can be compatible with IE6.

1. Use a statement
You must often place a statement on the head of an HTML page, recommending the use of strict standards. For example

or XHTML uses

Finally you need to be IE6 into compatibility mode, which is already compatible enough.

2. Use position:relative
Setting a label position:relative can solve a lot of problems, especially if you've ever had an unseen experience or a strange layout frame. Obviously, you need to be careful that all the child elements placed in absolute position are referenced to find a new location.

3. Use Display:inline for floating elements
Floating element will have a famous IE6 bilateral distance margin bug. If you set the left margin 5px but actually get the 10px left margin. Display:inline can solve this problem, although it is not required, but CSS is still valid.

4. Set element start Haslayout
Most IE6 (IE7) rendering problems can be compatible with the Haslayout properties of the elements. This is the IE built-in setting, to determine a content block relative to other content blocks have boundaries and position. Setting Haslayout is also necessary when you need to set an inline element such as a join into a block element or a transparent effect.

5, fix the bug of duplicate character
A complex layout triggers a bug: The last character of a floating object appears after the element that has cleared the float. There are several solutions, partly ideal, and some tests and errors are necessary.
A, to ensure that the floating elements are used: display:inline;
b, the last floating element uses margin-right:-3px;
c, use a conditional comment after the last element of the floating object. For example, enter comments here ... <! [EndIf]
D, at the end of the container using a div empty tag (it must also be set 90% width or even smaller)

6, using a label to complete the clickable and hover principle
Ie6 only supports the CSS definition hover effect of a label
You can use it to control JavaScript-initiated widgets so that they still keep the keyboard operating. There is an alternative question, but a tag is the most reliable of all solutions.

7, using!important, or advanced selector to replace IE specific code
In an external CSS file, it is still possible to use valid CSS code to target IE6, given the traditional hacks and conditional judgment. For example: The minimum height can be defined using.
#element {
Min-height:20em;
Height:auto!important; /* Understood by all browsers * *
Height:20em; /* IE6 incorrectly uses this value/*
}
Ie6 does not support "min-height" and incorrectly rewrites 20em as "auto". However, when the content is greater than the set space, it increases its size.
Another option is to use the advanced selector. For example
#element {
Min-height:20em;
Height:20em;
}
/* Ignored by IE6 * *
#element [id] {
Height:auto;
}

8. Avoid percent definition
The percentage is more confusing under IE. Unless you're very careful about the size of each parent element, you can probably finally avoid it. You can still use!important for other browsers to use percentile. For example:
Body {
margin:2% 0!important;
margin:20px 0; /* IE6 Only * *
}

9. Early and regular test
Do not discard IE6 tests until your site and application are complete. The problem will be much more serious and take a long time to fix. If your site can run on Firefox and IE6, it will almost certainly work in other browsers.

10, refactoring your code
Often, it takes more time to fix than to reconsider the layout problem. HTML subtle modifications and simpler CSS are often the most effective. This means you have to give up the perfect legal code, but there will be fewer problems and you know how to deal with what's going to happen.