The following figure shows the browser viewing rate in the visitor details in the website statistics system, and IE6 accounts for more than 40%. Although there are many types of browsers, IE alone has many versions such as IE5.5, IE6, IE7, IE8, etc. Among these many high-end versions, IE6 is still loved by most users, so when typing, IE6 is not considered the compatibility issue of IE6, otherwise it will lose many visitors.
Here are 10 issues that must be paid attention to in IE6:
1. Use DOCTYPEYou need to add the DOCTYPE type at the top of the HTML page. Of course, the strict version is worth recommending, for example:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd>
Or, 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 to see is that IE6 enters quirk mode – there are actually enough quirks.
2. Set position: relativeSetting position:relative solves more than one problem, especially when setting alignment. Obviously, one thing you need to understand is that absolute positioning is relatively speaking. Maybe, because you don’t have a set, you don’t know that everything has flew there. For example, if you design each article, there is a picture before it, and finally, you find that there is only one picture on the page, maybe they overlap.
3. Set display:inline value for floating elementsThis originates from the famous IE6 double margin bug. For example, if you design floating for a DIV and set margin-left:5px;, it is likely to be margin-left:10px in IE6. Here, set display:inline for floating elements to solve the problem.
4. Set hasLayout for elementsMany IE6 (or IE7) problems can be solved by setting the hasLayout value. (If you don't know what hasLayout is, please see here)
The easiest way to set a hasLayout value for an element is to add the height or width of CSS (of course, zoom can also be used, but this is not part of CSS). Setting a specific value is recommended, but sometimes it does not necessarily mean that the height is. Here, you may use height:1%. If the parent element does not set the height, the physical height of the element will not change, but it already has the hasLayout property.
5. Solve the problem of repeated charactersA complex layout may cause some text inside floating elements to appear below the cleanup floating position. This is a strange problem, and the following can help you solve it:
• Make sure that display:inline is set to the floating element;
•Use margin-right:-3px in floating elements;
•Add an IE comment after the last element of the floating element, for example: <!--[if !IE]>Let your comment here... <![endif]-->
• Add a DIV to the last element (this is to set width to 90% or other similar height)
UPDATE: The easiest way is to delete all comments. (Thanks to Tian Wei'er for her tip, I haven't encountered it myself, but after Googled it, I found that this method can also be solved, and this is a recommended method.)
You can check out more explanations about this in positioniseverything.net.
6. Only use hover in the <a> tag, IE6 only supports the <a> tag to display hover style
Of course, you can still solve this method through JS. However, this is about accessibility. It is recommended not to set important content in hover implemented using JS.
7. Use !important or advanced selector to distinguish IE browserFor 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 identify min-height. You can set a fixed height to allow IE6 to resolve to 20em. Even so, it will change its height due to the size of the content. Another way is to use advanced selectors:
#element {
min-height: 20em;
height: 20em;
}
/* Ignore IE6 */
#element[id] {
height: auto;
}
8. Avoid scaling sizesThe scale 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 as early as possible, test frequentlyDon't forget to test early and test frequently unless your level is completed. Otherwise, you may spend more time solving IE6 problems. Generally speaking, if your website can perform well under IE6 and firefox, it is estimated that other browsers will not have any major problems.
10. Refactor your codeIn many cases, solving a problem may take more time than refactoring your code.