微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!
尾部专题提供尾部的最新资讯内容,帮你更好的了解尾部。
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貌似有着渊源。