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

What are the common CSS compatibility solving techniques in IE6? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

To give you a brief introduction to the common CSS compatibility solutions in IE6, IE6 browsers still have a high market share, so as a web front-end development, it is inevitable to be compatible with IE6 browsers.

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:

# 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 {understoodbyallbrowsers*/height:20em; heightVlue 20mm; * Mimi heightVal autolover important; / * Mimi / * 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 compatibility are often the most effective. This means that you will have to give up legitimate code, but there will be fewer problems, and you will know how to deal with what is going to happen.

The answers to the questions about the common CSS compatibility skills in IE6 are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.