10 tips to help you fix IE6.

Source: Internet
Author: User
Tags html page min relative

1. Use of DOCTYPE

You need to add the DOCTYPE type to 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, the 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 into the quirks model-enough quirks.

2. Set Position:relative

Setting position:relative solves more than one problem, especially when you need to set up alignment. Obviously, the point you need to understand is that absolute positioning is relative. Perhaps, because you have no set, and do not know that things have flown there. For example, you've designed each article before you have a picture, and finally, you find that there is only one picture on the page, perhaps, they overlap.

3. Set the Display:inline value for the floating element

This stems from the famous IE6 double margin bug, for example, you have designed a float for a Div, and, set the margin-left:5px, in IE6 is probably margin-left:10px, here, to the floating element set display:inline; , you can solve the problem.

4. Set Haslayout for elements

Many IE6 (or IE7) problems can be solved by setting the Haslayout value.

The simplest way to set the Haslayout value for an element is to add the height or width of the CSS (of course, zoom is also available, but this is not part of the CSS). Setting a specific value is recommended, but sometimes it's not always known how high it is, and here you may be using height:1%. If the parent element does not have a height set, the physical height of the element does not change, but the Haslayout attribute is already available.

5. Solve the problem of repeated occurrences of characters

A complex layout can cause text in some floating elements to appear below the clean floating position. This is a strange question, below this can help you to solve:

    • Make sure the floating element is set display:inline;
    • The use of margin-right:-3px in floating elements;
    • Add an IE annotation after the last element of the floating element, for example: <!--[if! Ie]> put your notes here ... <! [endif]–>
    • Add a div to the last element (which sets the width to 90% or another similar height)

UPDATE: The easiest way to do this is to remove all annotations.

You can go to the positioniseverything.net to see more about this explanation.

6. Only use HOVER,IE6 in <a> label to support <a> label display hover style only

Of course, you can still use JS to solve this method. However, this is about access to the issue of accessibility. It is recommended not to set the important content in the use of JS to achieve the hover.

7. Use!important or advanced selector to differentiate IE browser

For example, min-height can avoid using CSS to achieve the compatibility of IE.

#element {
Min-height:20em;
Height:auto!important;
Height:20em; /* Let IE6 show this height * *
}

IE6 does not correctly identify Min-height, you can set a fixed height, so that IE6 to solve the plate 20em. Even so, it will change the height as the size of the content expands. Another method is to use the Advanced selector:

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

8. Avoid proportional size

Proportions can make IE6, unless you add an exact height to the parent element. Otherwise, add!important to the other, for example:

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

9. Test as early as possible, often test

Do not forget to test as early as possible, often test, unless your degree has been completed. Otherwise, you may spend more time to solve the IE6 problem. In general, if your site is able to perform well under IE6 and Firefox, it may not be a big problem for other browsers. (At least I have a deep understanding of myself)

10. Refactoring Your code

In many cases, solving a problem may take more time to structure your code. For example, the last time the company wrote a channel page, no side of the production, while testing IE6 performance, resulting in a lot of strange problems recently, because the layout is more complex. Later, simply refactor the code. It took 22. I think, if you want to solve the problem, maybe 2 days can not be.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.