Web page layout should consider IE6 compatibility issues

Web page layout should consider IE6 compatibility issues

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.

<<:  Detailed explanation of several ways to create a top-left triangle in CSS

>>:  Solve the problem of docker images disappearing

Recommend

Vue calculated property implementation transcript

This article shares the Vue calculation property ...

Detailed explanation of top command output in Linux

Preface I believe everyone has used the top comma...

WeChat applet custom bottom navigation bar component

This article example shares the specific implemen...

Detailed explanation of common methods of JavaScript arrays

Table of contents Common array methods pop() unsh...

Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS W...

Detailed explanation of the WeChat applet request pre-processing method

question Because some of our pages request data i...

Example of using the href attribute and onclick event of a tag

The a tag is mainly used to implement page jump, ...

Teach you how to implement the observer mode in Javascript

Table of contents What is the Observer Pattern? S...

Tutorial on installing PHP on centos via yum

First, let me introduce how to install PHP on Cen...

How to implement Mysql scheduled task backup data under Linux

Preface Backup is the basis of disaster recovery....

CSS to achieve pop-up window up and down center left and right and transparent background lock window effect

There is a simple CSS method to realize the pop-u...

Complete steps for Docker to pull images

1. Docker pull pulls the image When using $ docke...

Analysis of MySQL latency issues and data flushing strategy process

Table of contents 1. MySQL replication process 2....

JavaScript prototype and prototype chain details

Table of contents 1. prototype (explicit prototyp...

The basic use of html includes links, style sheets, span and div, etc.

1. Links Hypertext links are very important in HTM...