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

This article mainly explains "how to solve the problem of CSS compatibility in IE6". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the CSS compatibility problem in IE6.

Common CSS compatibility solution skills in IE6

1. Use a declaration

You must always put a statement in the header of the HTML page that recommends the use of strict standards. At the same time, it is necessary for IE6 to enter compatibility mode, which is compatible enough.

2. 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.

◆ ensures that all floating elements use: display:inline

◆ * A floating element uses margin-right:-3px

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

The * of ◆ in the container uses an empty div tag (it must also be set to 90% width or less).

6. Use a tag to complete clickability and hover principle

IE6 only supports the CSS of the a tag to define the hover effect, which you can use to control the widgets launched 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. 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:

The following is a code snippet:

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

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

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 {Minmuri heightVlue 20emThis heightVOTHANGTHANGTHYTHANGTHANGTHANGHANGTHANGHANGHANGHANGHANGHANGHANGHANGHANGHANGHANGHANGHANGHYTHANG, the understoodbyallbrowsers * / height:20em;/*IE6incorrectlyusesthisvalue/*}

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 {marginal lug 2% 0 percent important.marginantion 20px0location.IE6onlyzing /}

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

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.

At this point, I believe you have a deeper understanding of "how to solve the problem of CSS compatibility in IE6". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.