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

This article mainly explains "how to solve the bug under the HTML standard". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the bug under the HTML standard".

1. Set position: relative

Setting an element to "position:relative" can solve a lot of problems, especially if you have encountered hidden or weird boxes.

two。 Set the floating element to display:inline

Floating elements with margin attributes can cause IE6 double margin problems, for example, if you specify margin-left as 5px for an element, but the IE6 actually appears as 10px. "display:inline" will solve this problem, of course, it is not the only way.

3. Set an element to hasLayout

Many rendering problems with IE6 (and IE7) can be solved by setting the hasLayout of the element. Used to determine how the content is laid out and positioned relative to other elements. If you need to set an inline element (such as a link) as a block element, or apply a transparency effect.

The easiest way to set up hasLayout is to set a height or width for CSS (zoom is also available, but zoom is not part of the CSS standard). We recommend setting the real size, but the problem is that this is not realistic, you may need to use "height:1%". If the parent element does not have a height set, the actual height of the element is not affected, and hasLayout is enabled at this time.

4. Fixed duplicate text bug

A complex layout can trigger the last characters of a floating element that may appear in the bug that appears below the cleanup element. Here are several solutions, some of which are perfect, but it is also necessary to do some trial and error:

◆ ensures that all elements use "display:inline;"

◆ uses a "margin-right:-3px;" on the last element

Use a conditional comment for the last entry of the floating element, such as:

Put your commentary in here...

Use an empty div in the last element of the container (it is also necessary to set the width to 90% or similar.)

5. Use! important or advanced selectors to distinguish between IE6

Instead of using traditional Hack or conditional CSS in extra files, it is also possible to write viable code that is specific to IE6. For example, the minimum height can be defined by this code:

# element {

Min-height: 20em

Height: auto! important; / * all browsers understand this code * /

Height: 20mm; / * incorrect use of this value by IE6 / *

}

IE6 does not understand min-height and mistakenly overwrites the "auto" height with 20em, but it automatically increases the height if the content requires more space. Another alternative is to use an advanced selector, such as e.g.

# element {

Min-height: 20em

Height: auto! important

Height: 20em

Overflow: visible

}

6. Avoid percentage unit

The percentage will confuse IE. Unless you can accurately control the size of each parent element, it is possible to achieve the best prevention. You can pass! important continues to use percentages in other browsers, such as:

Body {

Margin: 2% 0! important

Margin: 20px 0; / * IE6 only * /

}

7. Test as early as possible and keep testing

Don't wait until your site or application is complete to test IE6;, which may be worse and will take more time to fix. If your site works properly in Firefox and IE6, there will generally be no problem in other browsers.

8. ReFactor your code

It often happens that fixing bug takes longer than rethinking a layout problem. It is often more effective to make small changes to HTML and some simple CSS. This may mean that you have to give up perfect code, but there will be fewer long-term problems and you will know very well in the future if you deal with these possible problems.

Thank you for your reading, the above is the content of "how to solve the bug under the HTML standard". After the study of this article, I believe you have a deeper understanding of how to solve this problem under the HTML standard, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.