Shulou(Shulou.com)06/02 Report--

This article shows you ten tips on how to solve IE6 compatibility problems. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

10 key points to solve IE6 compatibility problems

1. Declaration of use

You must always put a statement in the header of the html page that recommends the use of strict standards. For example

Or,forXHTML:

* you need to enter IE6 into compatibility mode, which is compatible enough.

2. Use position:relative

The second solution to the IE6 compatibility problem: use position:relative. Setting a tag position:relative can solve a lot of problems, especially frameworks that have had invisible experiences or strange layouts. Obviously, you need to be careful whether the child elements placed in the absolute position refer to finding a new location.

3. Use display:inline for floating elements

Floating elements will have a famous IE6 double distance marginbug. Suppose you set the left margin 5px but actually get the left margin of 10px. Display:inline can solve this problem, although it is not necessary, but css is still valid.

4. Set the element to start hasLayout

Most rendering problems with IE6 (IE7) are compatible with the hasLayout attribute of the element. This is a built-in setting in IE that determines that one content block has boundaries and positions relative to other content blocks. When you need to set an inline element such as a connection to become a block element or a transparency effect, setting hasLayout is also necessary.

5. Fix the bug of duplicate characters

A complex layout triggers a bug: the floating object's * * characters appear after elements that have been cleared of floats. There are several solutions, some of which are ideal, and some tests and errors are necessary.

Make sure that all floating elements use: display:inline

B, * A floating element uses margin-right:-3px

C. use a conditional comment after an element of a floating object. For example, enter comments here...

6. Use a tag to complete clickability and hover principle

IE6 only supports css definition of hover effect for a tag.

You can use it to control the widgets started by javascript so that they still maintain keyboard operation. There is an alternative problem, but the a tag is the most reliable of all solutions.

7. Use! important, or advanced selector to replace IE-specific code

Solution to IE6 compatibility problem Seven: use! important. In external css files, instead of relying on traditional hacks and conditional judgment, it is still possible to use valid css code against IE6. For example, the minimum height can be defined.

# element {min-height:20em; heightfrog autogenous importantleash trend understoodbyallbrowsersplaying / height:20em;/*IE6incorrectlyusesthisvalue/*}

IE6 does not support "min-height" and mistakenly rewrites 20em to "auto". However, when the content is larger than the set space, it increases its size.

Another option is to use advanced selectors. For example

# element {min-height:20em; height:20em;}

8. Avoid the definition of percentage

The percentage is confusing under IE. Unless you are very careful about the size of each parent element, you can probably avoid it. You can still use! important for other browsers to use percentiles. For example:

Body {margin 2% 0 percent important; margin:20px0;/*IE6only*/}

9. Breakfast and regular testing

Don't give up IE6 testing until your website and application are complete. The problem will be more serious and will take a long time to fix. If your site can run on firefox and IE6, it will almost certainly run on other browsers.

10. ReFactor your code

Solution to the IE6 compatibility problem: ReFactor the code. Often, fixing takes more time than rethinking the layout. Minor modifications to Html and simpler css are often the most effective. This means that you have to give up legal code, but there will be fewer problems, and you know how to deal with what is going to happen.

/ * ignoredbyIE6*/ # element [id] {height:auto;}

The code part tries syntax coloring, which seems a little messy. Here is the link to the original English text: http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-IE6-problems/

The above are the top ten tips on how to solve IE6 compatibility problems. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.