IE6下产生的3像素边距Bug如何解决?

发布时间:2019-09-11编辑:脚本学堂
关于Bug问题,前面文章也讲了不少了,都不尽相同,请看本文所讲的IE6下产生的3像素边距Bug解决方法,对比一下和以前的方法有什么不同。

下面是只有在IE6下才出现Bug代码。
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
  <div style="width:300px;height:200px;border:1px solid red;">
    <div style="width:50px;height:200px;background-color:#CCCCCC;float:left;"></div>
    <div style="width:50px;height:200px;background-color:#CCCCCC;float:right;"></div>
    <div style="height:200px;background-color:#CCCCCC;margin-right:50px;">哈哈</div>
  </div>
</body>
</html>

解决:左边部分加上-3的右边距,右边部分加上-3的左边距,中间部分的右边距减少3:

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>

<body>
  <div style="width:300px;height:200px;border:1px solid red;">
    <div style="width:50px;height:200px;background-color:#CCCDDD;float:left;margin-right:-3px;display:inline;"></div>
    <div style="width:50px;height:200px;background-color:#CCCDDD;float:right;margin-left:-3px;display:inline;"></div>
    <div style="height:200px;background-color:#CCCCCC;margin-right:47px;">哈哈</div>
  </div>
</body>
</html>
 

了解更多bug内容请看:Div+css教程之IE6下3像素bug的解决方法,IE6中常见的CSS bug大总结以及解决方法