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,如需转载请自行联系原作者

上一篇:SLS基于telegraf的监控快捷接入


下一篇:Spring boot xstream解析UnknownFieldException异常