Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the ten bug tips for repairing IE6?

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

In this issue, the editor will bring you about the ten bug techniques for repairing IE6. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

10 tips for repairing bug under IE6

The end of IE6 is just around the corner, which is comforting news for our front-end developers. But this apocalypse is not coming, so we still strive for victory by using various hack and methods to avoid bilateral distance under IE6, transparent background, repetitive text and so on. Here are 10 tips for repairing bug under IE6 reproduced from the front-end view:

1. Use DOCTYPE

You should always use DOCTYPE in the header of every HTML file, and we recommend the strict version, such as:

Or, for XHTML, use:

The trickiest thing you need to deal with is that IE6 goes into quirks mode-it's weird enough.

two。 Set up position:relative

Setting an element to "position:relative" can solve a lot of problems, especially if you have encountered hidden or weird boxes. Obviously, you need to be very careful, because absolutely positioned child nodes may be relocated as a result.

3. Set the floating element to display:inline

Floating elements with the margin attribute can cause the famous IE6 double margin problem. For example, you specify margin-left as 5px for an element, but the IE6 actually appears as 10px. "display:inline" will solve this problem, although this is not necessary, your CSS is still valid.

4. Set an element to hasLayout

Many rendering problems with IE6 (and IE7) can be solved by setting the hasLayout of the element. This is an IE internal attribute (hidden by IE, more information on haslayout can be found here) 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, setting hasLayout may also be necessary.

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

5. Fixed duplicate text bug

Complex layouts can trigger some characters in the floating element that may appear in the bug that appears below the clear element. Here are several solutions, some of which are *, but some trial and error is also necessary:

. Make sure all elements use "display:inline;"

. Use a "margin-right:-3px;" on an element

. Use a conditional comment for an entry of a floating element, such as:

. Use an empty div in the container's * * element (it is also necessary to set the width to 90% or similar width.

> you can also visit positioniseverything.net to see a complete introduction to the problem.

6. Use only tags on clickable and hovering elements

IE6 only knows the CSShover effect on the a tag.

You can also use them within JavaScript-based components to keep their keyboards operational. There are some alternatives, but the label is more reliable than other options.

7. 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; heightheight:20em;/*IE6 autoimports importantlycontrol * all browsers understand this code * / use this value incorrectly / *}

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 advanced selectors, such as e.g.

# element {min-height:20em; height:20em;} / * IE6 ignores the following code * / # element [id] {height:auto;}

8. Avoid percentage unit

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

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

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

10. 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 the 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.

These are the ten tips shared by the editor for you to repair bug under IE6. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, 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.

Views: 216

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report