我们可能碰到过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>
< 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;
}
{
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;
}
{
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>
< 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>
< 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>
< 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
，如需转载请自行联系原作者
