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

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

 

直接原因和HTML注释有关。

看下代码:

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Meta ie6bug #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; }               这是第一栏     !          !            这里是第二栏        

 

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

 

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

 

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

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px">#col1 {   float:left;   width:197px;   background-color:#f90; }

 

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

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px">#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也可以，但是实际中我们的布局宽度不想改，所以下面的也可以

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Meta ie6bug #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; }               这是第一栏     !          !            这里是第二栏        

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

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

 

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Meta ie6bug #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; }               这是第一栏     !          !          !            这里是第二栏        

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

 

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

ottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; line-height: 16px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 4px; font-family: verdana,宋体; color: #000000; font-size: 10pt; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Meta ie6bug #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; }               这是第一栏     !          !          !            这里是第二栏        

 

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。