10 points to resolve compatibility problems IE6

2010-04-12  来源:本站原创  分类:Web  人气:215 

1, using the statement
You must always put the head in the html page a statement, recommended strict standards. Such as

<! 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">

Finally you need is access to ie6 compatibility mode, it has enough working with.
2, using the position: relative
To set a label position: relative can solve many problems, particularly those who have had experience or see strange layout of the framework. Obviously, you need to be careful, absolute position whether to place the child elements are the light to find a new location.
3, the floating element to use display: inline
Floating element will have a well-known bilateral ie6 from margin bug. If you set the left margin 5px 10px actually been left margin. display: inline can solve this problem, although it is not necessary, but the css is still valid.
4, set element start hasLayout
Most ie6 (ie7) the rendering problems can come up elements compatible hasLayout property. This is a built-in set ie, to determine the content of a content block relative to other blocks have boundaries and location. When you need to set an inline element such as a link into a block element or a transparent effect, set hasLayout is necessary.
5, repeated characters bug fix
Triggers a complex layout bug: floating object was last character will appear in the floating element has been cleared behind. There are several solutions, some are good and some testing and error is necessary.
a, to ensure that the use of floating elements: display: inline;
b, the last element of the use of floating margin-right:-3px;
c, the last element in the floating object with a condition after the comment. For example, <! -> Enter comment ... <! [Endif]
d, the last in the container using a div empty tag (it must also set the width of 90% or less)
6, using a label to complete can click and hover principle
Ie6 only supports the definition of a tag css hover effects you can use it to control the start javascript widgets, making them remain keyboard. Here is the alternative of the problem, but a label is all the most reliable solution.
7, use! Important, or senior selector alternative ie specific code in an external css file and give up with the traditional hacks and conditional, to use a valid css code for ie6 is still possible. For example: You can use what the definition of minimum height.
# Element (
min-height: 20em;
height: auto! important; / * understood by all browsers * /
height: 20em; / * IE6 incorrectly uses this value / *

Ie6 does not support the "min-height" and the error will 20em rewritten as "auto". However, when the content is greater than the space set up, it would increase its size.
Another option is to use the advanced selector. Such as

# Element (
min-height: 20em;
height: 20em;
8, to avoid the definition of percentage ie the percentage of under chaotic. Unless you are very careful about the size of each parent, so probably the last to avoid. You can still use other browsers! Important to use the percentile. For example:
body (
margin: 2% 0! important;
margin: 20px 0; / * IE6 only * /

9, early and regular testing of your websites and applications completed, do not give up ie6 test. The problem will be more severe and take a long time to repair. If your site can run in firefox and ie6, it will almost certainly run in other browsers.
10, restructure your code often, and fix the problem than to reconsider the distribution of more time-consuming. Html minor modifications and more simple css often the most effective. This means that you have to give up the perfect legal code, but will be fewer problems, and you know how to deal with going to happen.

/ * Ignored by IE6 * /
# Element [id] (
height: auto;
Some tried under the code syntax coloring, looks like a bit chaotic, here is a link to the original English text: