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

This article mainly explains "how to solve the 3-pixel bug of IE6". The content of 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 3-pixel bug of IE6".

Master one and six, I was drunk, and there was a double in the last line. So what is the 3-pixel bug of IE6?

IE7 fixed the name of a bug,bug in IE6 called "3-pixel bug", that is, text overflow bug. The form of expression is ie6 browser text or picture overflow, inexplicably automatically copy a few characters. As shown in the following picture, a "next page" automatically overflows.

How is the 2-pixel and 3-pixel bug produced?

One container A contains 2 sub-containers B and C with "float" style.

The width of the second container C is greater than that of the parent container A, or the width of the parent container A minus the width of the second container C is less than 3.

There are comments before the second container (which is why this bug is also called "IE6 comment bug").

Here is the code that reproduces the process of producing bug. If you browse with ie6, there will be an extra word "drunk" below.

I'm the sixth master. I'm not drunk.

Third, how to make sixth Master sober up quickly? The best solution for ie 6 3 pixel bug: margin-right:-3px

There are a lot of reprints on the Internet about the solutions, but many of them don't work or are not ideal after I have tried one by one. The following is an excerpt:

1. Change the structure so that the structure of [one container contains 2 sub-containers with "float" style does not appear.

Comments on this solution: crazy! The practice of giving up eating because of choking.

two。 Reduce the width of the second container so that the parent container width minus the second container width is greater than 3, for example, change the width of the second child container in the example in this article to 197px.

Comments on this solution: can be used as long as the page layout is satisfied. But when the situation is more complicated, it may be more difficult to implement.

3. Remove all comments.

Comments on this solution: the most direct approach, but "code without comments" is really not a good code writing habit.

4. Fix the way the notes are written. It will be written as here are the comments.

Comments on this solution: not a bad solution, but not everyone appreciates the annotated content [endif]-> this way of commenting.

5. Add one or more to the second container to solve it.

Comments on this solution: a solution that makes people feel uncomfortable. But it can be solved. Affect the efficiency of web pages

I don't recommend any of these five methods. According to my experiment, the most direct way to solve the problem is to add margin-right:-3px; to parent Container An in general.

I'm the sixth master. I'm not drunk.

Cherish life and stay away from ie6

Since no one can explain the root cause of the overflow bug, there is no corresponding solution once and for all. There is only one way to solve this problem fundamentally, and that is kill ie6. But MS Microsoft is more anxious than we are, but it just doesn't help.

Thank you for reading, the above is the content of "how to solve the 3-pixel bug of IE6". After the study of this article, I believe you have a deeper understanding of how to solve the problem of 3-pixel bug of IE6, 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.