IE6 compatibility should be considered in web page layout

Time:2021-11-25

The following figure shows the browser viewing rate of visitor details in the website’s statistical system, with IE6 accounting for more than 40%. Although there are many kinds of browsers, one ie alone has multiple versions such as ie5.5, IE6, IE7 and IE8. Among these many high-level versions, IE6 is still loved by most users, so the compatibility of IE6 is not considered during typesetting, otherwise many visitors will be lost.

Here are 10 problems that must be paid attention to in IE6:

1. Use DOCTYPE
You need to add DOCTYPE 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, 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 quirky mode – there are enough quirks.

2. Set position: relative
Setting position: relative solves more than one problem, especially when you need to set alignment. Obviously, what you need to understand is that absolute positioning is relative. Maybe, because you don’t have settings, you don’t know where everything has flown. For example, you design a picture in front of each article. Finally, you find that there is only one picture on the page. Maybe they overlap.

3. Set the display: inline value for the floating element
This comes from the famous IE6 double margin bug. For example, you design a float for a div and set margin left: 5px;, In IE6, it is likely to be margin left: 10px. Here, set display: inline; for floating elements;, The problem can be solved.

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, please see here)

The simplest way to set the 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 you don’t necessarily know the height. Here, you may use height: 1%. If the parent element has no height set, the physical height of the element will not change, but it already has the hasLayout attribute.

5. Solve the problem of repeated characters
Complex layout may cause some text in floating elements to appear below the cleaning floating position. This is a strange problem. The following can help you solve it:

• ensure that the floating element is set to display: inline;
• use margin right: – 3px in floating elements;
• add an IE comment after the last element of the floating element, for example: <– [if! Ie] > put your comments here… <! [endif]–>
• add a div to the last element (this sets the width to 90% or other similar height)
Update: the easiest way is to delete all comments. (thanks for Tian Weier’s tips. I haven’t encountered them myself. However, Google found that this method can also be solved, and it is worth recommending.)

You can find out more about this in positioniseverything. Net.

6. Hover is only used in < a > tags. IE6 only supports the display of hover style in < a > tags
Of course, you can still solve this problem through JS. However, this is about accessibility. It is recommended not to set the important content in the hover implemented by JS.

7. Use! Important or advanced selectors to distinguish IE browsers
For example, min height can avoid using CSS to achieve ie compatibility.

#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 make IE6 resolve to 20em. Even so, it will change its height because of the size of the content. Another way is to use an advanced selector:

#element {
min-height: 20em;
height: 20em;
}
/*Ignore IE6*/
#element[id] {
height: auto;
}

8. Avoid proportional dimensions
Scaling will confuse IE6 unless you add an exact height to the parent element. Otherwise, add it to the others! Important, for example:

body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 readable*/
}

9. Test as early as possible and often
Don’t forget to test early and often unless your level has been completed. Otherwise, you may spend more time solving IE6 problems. In general, if your website can perform well under IE6 and Firefox, it is estimated that other browsers will not have any big problems.

10. Refactor your code
In many cases, solving a problem may take more time than refactoring your code.