For web page layout, the compatibility of IE6 should be considered _ HTML/Xhtml _ web page creation

The following lists 10 important issues in IE6. This is the browser viewing rate in visitor details in the statistics system of this site. IE6 accounts for more than 40 percent. Although there are many types of browsers, a single IE has multiple versions such as IE5.5, IE6, IE7, and IE8. Among these many high versions, IE6 is still popular with most users, therefore, IE6 compatibility is not considered during typographical layout, or many visitors will be lost.

The following lists 10 important issues in IE6:

1. Use DOCTYPE
You need to add the DOCTYPE type to the top of the HTML page. Of course, the strict version is recommended. For example:

Http://www.w3.org/TR/html4/strict.dtd>


Or, the XHTML page! DOCTYPE:

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

The last thing you don't want to see is that IE6 is in the weird mode-there are already many geeks.

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 didn't set it, you don't know where to fly. For example, you have designed an image before each article, and 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 is due to the famous IE6 double margin BUG. For example, you designed a floating DIV and set the margin-left: 5px ;, in IE6, it is probably margin-left: 10px. Here, set display: inline; For floating elements to solve the problem.

4. Set hasLayout for the element
Many IE6 (or IE7) problems can be solved by setting the hasLayout value. (If you do not know what hasLayout is, please refer to here)

The simplest way to set the hasLayout value for an element is to add the 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 do not necessarily know the height. Here, you may use height: 1%. If no height is set for the parent element, the physical height of the element does not change. However, the hasLayout attribute is available.

5. Solve the Problem of repeated characters
Complex la S may cause some text in floating elements to appear below the floating position. This is a strange problem. Here we can help you solve it:

• Make sure that the display: inline is set for the floating element;
• Use margin-right:-3px in floating elements;
• Add an IE comment after the last element of the floating element, for example:
• Add a DIV to the final element (this is to set width to 90% or other similar heights)
UPDATE: The simplest method is to delete all comments. (Thanks to Xiao weier's prompt, I haven't met it myself. However, after a google review, I found that this method can also be solved, and this is a recommended method .)

You can go to positioniseverything.net to view