Ten common solutions to prevent IE6 from bugs

The following ten solutions are some default settings for div + CSS layout bugs that often occur in IE6. Due to the many bugs in IE6, therefore, we often encounter some inexplicable layout problems when creating pages. Every time we encounter problems, we will find the corresponding page location and CSS, use the following solutions to avoid some common IE6 bugs.

Although IE8 has already arrived, it is doing well. The download of Firefox exceeded within 8 hours, far beyond 24 hours. However, Internet Explorer 6 is still the most popular browser. For the moment, it is both a responsibility and a capability to make the web better. If you are still helpless to IE6's problems, let me show you 10 fixes from sitepoint that solve IE6 problems and learn these 10 methods, you can solve most IE6 problems.

1. Use doctype

You need to add the doctype type to the top of the HTML page. Of course, the strict version is recommended. For example:

<! Doctype HTML public "-// W3C // dtd html 4.01 // en" Http://www.w3.org/TR/html4/strict.dtd>

Or, the XHTML page! Doctype:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

The last thing you don't want to see is that IE6 is in the weird mode-there are already many geeks.

2. Set position: relative

SetPosition: relativeSolve more than one problem, especially when you need to set alignment. Obviously, what you need to understand is that absolute positioning is relative. Maybe, because you didn't set it, you don't know where to fly. For example, you have designedArticleThere was a picture in front of the page. Finally, you found that there was only one picture on the page, maybe they overlap.

3. Set the display: inline value for the floating element.

This is due to the famous IE6 double margin bug. For example, you designed a floating Div and setMargin-left: 5px;In IE6, it is likely thatMargin-left: 10pxHere, set the floating ElementDisplay: inline;To solve the problem.

4. Set haslayout for the element

Many IE6 (or IE7) problems can be solved by setting the haslayout value. (If you do not know what haslayout is, please refer to here)

The simplest way to set the haslayout value for an element is to add the CSS height or width (of course, Zoom can also be used, but this is not part of CSS ). Setting a specific value is recommended, but sometimes you do not necessarily know the height. Here, you may useHeight: 1%. If no height is set for the parent element, the physical height of the element does not change. However, the haslayout attribute is available.

5. Solve the Problem of repeated characters

Complex la S may cause some text in floating elements to appear below the floating position. This is a strange problem. Here we can help you solve it:

• Make sure that the floating element is setDisplay: inline;
• Use in floating ElementMargin-Right:-3px;
• Add an IE comment to the last element of the floating element, for example:<! -- [If! IE]> put your comments here...<! [Endif]->
• Add a div to the final element (this is to set width to 90% or other similar heights)

Update:The simplest way is to delete all comments. (Thanks to Xiao weier's prompt, I haven't met it myself. However, after a Google review, I found that this method can also be solved, and this is a recommended method .)

You can go to positioniseverything.net to learn more about this.

6. Only <A> Use hover in the tag, IE6 only supports <A> Label display hover Style

Of course, you can still solve this problem through Js. However, this is about accessibility. We recommend that you do not set important content in the hover implemented by using Js.

7. Use ! Important Or advanced selector to differentiate ie browsers

For example, Min-height can avoid using CSS for IE compatibility.

# Element { Min-Height: 20em; Height: Auto! Important; Height: 20em;/* display the height of IE6 */ }

IE6 does not correctly recognize Min-height. You can set a fixed height to parse IE6 to 20em. Even so, it will change the height due to the expanded size of the content. Another method is to use the advanced selector:

# Element { Min-Height: 20em; Height: 20em; } /* Ignore IE6 */ # Element [ID] { Height: auto; }

8. Avoid proportionally determining the size

The ratio will confuse IE6 unless you add an exact height to the parent element. Otherwise, add! ImportantFor example:

Body { Margin: 2% 0! Important; Margin: 20px 0;/* IE6 readable */ }

9. Early testing and frequent testing

Do not forget to test as early as possible and often perform tests unless your degree has been completed. Otherwise, you may spend more time solving IE6 problems. In general, if your website can perform well in IE6 and Firefox, it is estimated that other browsers will not have any major problems. (At least I have a deep understanding)

10. refactor your Code

In many cases, solving a problem may take more time than refactoring your code. For example, the last time I wrote a channel page to the company, I did not make it while testing the performance of IE6, which caused many strange problems recently, because the layout is complicated. Later, I simply reconstructed the code. It took 2 days. I think, if you want to solve the problem, it may take two days.