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

What are the common CSS compatibility solving techniques in IE6? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

IE6 browsers still have a high market share, so as a web front-end development, it is inevitable that they must be compatible with IE6 browsers. Here we will introduce 10 common CSS compatibility problems in IE6 browsers and related solutions.

51CTO recommends reading: Javascript solves common browser compatibility problems

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 margin bug. 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: 20mm;} / * ignored by IE6 * / # 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 {min-height: 20em; height: auto! important; / * understood by all browsers * / height: 20mm; / * IE6 incorrectly uses this value / *}

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! important; margin: 20px 0; / * IE6 only * /}

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.

After reading the above, have you mastered the common CSS compatibility solutions in IE6? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.