IE6尾部重复字符bug(3pxbug的衍生)及避免

我们可能碰到过ie6的末尾重复字符的问题。

 

直接原因和HTML注释有关。

看下代码:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb18030"  /> 
< title >ie6bug </title> 
< style  type ="text/css" > 
#main 
{ 
  background-color:#fff0f0; 
  border:1px solid #900; 
  height:400px; 
  width:600px; 
  overflow:hidden; 
  *display:inline-block; 
}    
#col1 
{ 
  float:left; 
  width:200px; 
  background-color:#f90; 
} 
#col2 
{ 
  float:left; 
  width:400px; 
  background-color:#fe0; 
} 
</style> 
</head> 

< body > 
   < div  id ="main" > 
     < div  id ="col1" > 
      这是第一栏 
     </div> < ! --end:#col1-- > 
     
     < ! --begin:#col2-- > 
     < div  id ="col2" > 
      这里是第二栏 
     </div> 
   </div> 
</body> 
</html>

 

2个浮动元素col1和col2之间（注意是之间，三明治，肉夹馍，随便你怎么比喻都行了).出现二个以上注释时，会出现重复字符，大家可以看到。

 

这里是200+400==600没有边距。

 

但是我们把col1的宽度减小3px，后发现bug没了

#col1 
{ 
  float:left; 
  width:197px; 
  background-color:#f90; 
}

 

如果我们为右面的div设置左边距5px，

#main 
{ 
  background-color:#fff0f0; 
  border:1px solid #900; 
  height:400px; 
  width:600px; 
  overflow:hidden; 
  *display:inline-block; 
}    
#col1 
{ 
  float:left; 
  width:195px; 
  background-color:#f90; 
} 
#col2 
{ 
  float:left; 
  width:400px; 
  margin-left:5px; 
  background-color:#fe0; 
}

 

我们计算时195+400+5+3px>600(考虑3px)

所以col1改为192px也可以，但是实际中我们的布局宽度不想改，所以下面的也可以

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb18030"  /> 
< title >ie6bug </title> 
< style  type ="text/css" > 
#main 
{ 
  background-color:#fff0f0; 
  border:1px solid #900; 
  height:400px; 
  width:600px; 
  overflow:hidden; 
  *display:inline-block; 
}    
#col1 
{ 
  float:left; 
  width:195px; 
  background-color:#f90; 
} 
#col2 
{ 
  float:left; 
  width:400px; 
  margin-left:5px; 
  margin-right:-3px; 
  background-color:#fe0; 
} 
</style> 
</head> 

< body > 
   < div  id ="main" > 
     < div  id ="col1" > 
      这是第一栏 
     </div> < ! --end:#col1-- > 
     
     < ! --begin:#col2-- > 
     < div  id ="col2" > 
      这里是第二栏 
     </div> 
   </div> 
</body> 
</html>

也许负边距也是不太令人满意。

对于两栏布局，我一般使用左栏左浮动，右栏右浮动的方式，中间的间距通过两栏宽度以外剩余值取得。

 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb18030"  /> 
< title >ie6bug </title> 
< style  type ="text/css" > 
#main 
{ 
  background-color:#fff0f0; 
  border:1px solid #900; 
  height:400px; 
  width:600px; 
  overflow:hidden; 
  *display:inline-block; 
}    
#col1 
{ 
  float:left; 
  width:194px; 
  background-color:#f90; 
} 
#col2 
{ 
  float:right; 
  width:400px; 
  background-color:#fe0; 
} 
</style> 
</head> 

< body > 
   < div  id ="main" > 
     < div  id ="col1" > 
      这是第一栏 
     </div> < ! --end:#col1-- > 
     
     < ! --多给你加点肉你还消化不了啊-- > 
     
     < ! --begin:#col2-- > 
     < div  id ="col2" > 
      这里是第二栏 
     </div> 
   </div> 
</body> 
</html>

因为实际中我用10px间距，所以很少碰到这个bug,研究发现如果小于6px间距，重复字符出现了，为什么是6px，难道是3px的双倍，ie你很强，3pxbug和双倍边距都碰上了。

 

好了，我们为第一个col1加个display:inline问题解决了。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb18030"  /> 
< title >ie6bug </title> 
< style  type ="text/css" > 
#main 
{ 
  background-color:#fff0f0; 
  border:1px solid #900; 
  height:400px; 
  width:600px; 
  overflow:hidden; 
  *display:inline-block; 
}    
#col1 
{ 
  float:left; 
  width:195px;/*大于194出现问题*/ 
  background-color:#f90; 
  display:inline;/*这句话解决问题了*/ 
} 
#col2 
{ 
  float:right; 
  width:400px; 
  background-color:#fe0; 
} 
</style> 
</head> 

< body > 
   < div  id ="main" > 
     < div  id ="col1" > 
      这是第一栏 
     </div> < ! --end:#col1-- > 
     
     < ! --多给你加点肉你还消化不了啊-- > 
     
     < ! --begin:#col2-- > 
     < div  id ="col2" > 
      这里是第二栏 
     </div> 
   </div> 
</body> 
</html>

 

我们采用对浮动元素加display:inline方式解决了这个bug，而且同3pxbug通用办法，而且和3px貌似有着渊源。

 本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/148438 ，如需转载请自行联系原作者