Ie6 text overflow bug (Comment bug) double margin (margin) bug width 100% solution

1. Text overflow bug will occur in the following cases

1. A container contains two sub-containers with the "float" style.
2. The width of the second container is greater than the width of the parent container, or the width of the parent container minus the width of the second container is less than 3.
3. There is a comment in front of the second container (this is why this bug is also called "IE6 comment bug ).

2. Effect chart when a bug occurs

This is normal

 

IE6 has an additional word "weird", which is really strange.

 

3. Solutions to fix the bug

1. To change the structure, the [a container contains two sub-containers with the "float" style] structure does not appear. -- Comment on this solution: Crazy! The practice of waste food.
2. Reduce the width of the second container and make the parent container width less than 3. For example, change the width of the second sub-container to 197px. -- comment on this solution: this solution can be used only when the page layout is satisfied. However, when the situation is complex, it may be difficult to implement it.
3. Remove all comments. -- Comment on this solution: the most direct practice, but "code without comments" is indeed not a good code writing habit.
4. Revise the comment writing method. I appreciate this annotation.
5. Add one or more containers after the second container. -- Comment on this solution: a solution that someone else feels uncomfortable. But it does. Affects webpage efficiency

4. Attach the sample code

  

   

    This text overflow bug is strange.
   
  

The IE6 bug is a headache or even a pain point. Sometimes, its various bugs will surprise you infinitely, sometimes a Perfect Web page on other browsers goes into a mess on IE6. Today, I encountered this problem. When debugging the page on firefox, the page was okay, but when I got to IE6, I was shocked and the layout was completely messy. Later I found it was caused by the bug of double margin on the floating layer under IE6, so I sorted out the problem and shared it with everyone. I believe that friends who write Web pages will surely encounter such a magical thing.

1. bug description:

A floating div in IE6 may produce a bug of double margin. The condition is: if the left float is left, the left margin is doubled; if the right margin is floating, the right margin is doubled. See the figure below:

Normally, the value of margin-left is 50px.

In IE6, the value of margin-left is 100px, which is doubled :(

 

2. Solution:

The solution is also very simple. You only need to add a css tutorial attribute display: inline to the floating layer to solve the problem.

 

 

 

 

 

 

 

[IE6.0 Bug summary 6] width 100%

I was confident that I would not generally use IE6 to test my own web pages, but I accidentally tested my blog with IETester today, which surprised me, although many pages do not have too many bugs on IE6, many of them become ugly, so they began to modify various bugs. Some other fonts and colors are very easy to change. It took me a few minutes to fix them, but one of them is very confusing. Simply put, there will be a problem in IE6 with the width of 100%. Below I will use code and screenshots to simulate this problem:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< Div Style = "Float: left; width: 140px; height: 200px; background-color: # EBB9FB; padding: 10px" > I am a left floating div </ Div > < Div Style = "Background-color: # CCCCCC; border: # CC9933 solid 1px; margin-left: 170px" >      < Table Border = "0" Cellpadding = "0" Cellspacing = "0" Style = "Width: 100% ;" >          < Thead >              < Tr Style = "Background-color: #00 CCCC" >                  < Td > Name </ Td >                  < Td > Age </ Td >                  < Td > University </ Td >                  < Td > Gender </ Td >              </ Tr >          </ Thead >          < Tbody >              < Tr >                  < Td > Silly </ Td >                  < Td > 33 </ Td >                  < Td > Zhejiang University </ Td >                  < Td > Male </ Td >              </ Tr >              < Tr >                  < Td > Silly </ Td >                  < Td > 32 </ Td >                  < Td > China Institute of Metrology </ Td >                  < Td > Male </ Td >              </ Tr >          </ Tbody >      </ Table > </ Div >

The normal figure is as follows:

However, the table on IE6 has a large blank space:

 

There are two solutions:

1. Set the width to 100% instead of 99%.
2. If the width must be 100%, you can add style _ height: 1% to the div outside the table to solve the problem.