|
The figure below shows the browser viewing rate in the visitor details in our website statistics system, IE6 accounts for more than 40%. Although there are many types of browsers, IE alone has multiple versions such as IE5.5, IE6, IE7, IE8, etc. Among these many high versions, IE6 is still popular with most users, so when typesetting, you have to consider the compatibility of IE6, otherwise you will lose a lot of visitors. 
Here are 10 issues that you must pay attention to in IE6: 1. Use DOCTYPE
You need to add the DOCTYPE type at the top of the HTML page. Of course, the strict version is recommended, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Or, for an XHTML page, !DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The last thing you want is IE6 going into quirks mode – and it already has enough quirks.
2. Set position: relative
Setting position:relative solves more than one problem, especially when alignment needs to be set. Obviously, one thing you need to understand is that absolute positioning is relative. Maybe, because you didn't set it up, you don't know where everything went. For example, you designed a picture before each article, but in the end, you found that there was only one picture on the page, perhaps they overlapped.
3. Set display:inline value for floating elements <br />This is due to the famous IE6 double margin BUG. For example, you designed a floating DIV and set margin-left:5px;, it is likely to be margin-left:10px in IE6. Here, setting display:inline; for the floating element can solve the problem.
4. Set hasLayout for the element
Many IE6 (or IE7) problems can be solved by setting the hasLayout value. (If you don't know what hasLayout is, see here)
The simplest way to set the hasLayout value of an element is to add CSS height or width (of course, zoom can also be used, but this is not part of CSS). Setting a specific value is recommended, but sometimes you don’t necessarily know the height. Here, you might use height:1%. If the parent element does not have a height set, the physical height of the element will not change; however, it already has the hasLayout property.
5. Solve the problem of repeated characters <br />Complex layouts may cause text in some floating elements to appear below the cleared floating position. This is a strange problem, here is how to solve it:
• Make sure the floated element has display:inline set;
•Use margin-right:-3px in floating elements;
• Add an IE comment after the last element of the float, for example: <!--[if !IE]>Put your comment here... <![endif]-->
• Add a DIV to the last element (this can be set to 90% width or something similar)
UPDATE: The easiest way is to just remove all the comments. (Thanks to Tian Weier for the tip. I haven't encountered this problem myself, but after searching on Google, I found that this method can also solve the problem, and it is a method worth recommending.)
You can read more about this at positioniseverything.net.
6. Only use hover in the <a> tag. IE6 only supports the <a> tag to display the hover style. Of course, you can still use JS to solve this problem. However, this raises the question of accessibility. It is recommended not to set important content in the hover implemented using JS.
7. Use !important or advanced selectors to distinguish IE browsers . For example, min-height can avoid using CSS to achieve compatibility with IE.
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* Let IE6 display this height */
}
IE6 cannot correctly recognize min-height, so you can set a fixed height so that IE6 can interpret it as 20em. Even so, it will still change height as the content grows in size. Another approach is to use advanced selectors:
#element {
min-height: 20em;
height: 20em;
}
/* Ignore IE6 */
#element[id] {
height: auto;
}
8. Avoid proportional sizes <br />Proportionals will confuse IE6 unless you add an exact height to the parent element. Otherwise, add !important to the others, for example:
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 readable */
}
9. Test early and test often <br />Don't forget to test early and test often, unless your level is complete. Otherwise, you may spend more time troubleshooting IE6 issues. Generally speaking, if your website performs well in IE6 and Firefox, there will probably be no major problems with other browsers.
10. Refactor your code <br />In many cases, solving a problem may take more time than refactoring your code.
|
