ie6 双边距

IE6双倍边距问题

最新推荐文章于 2019-12-24 16:13:14 发布

原创最新推荐文章于 2019-12-24 16:13:14 发布 · 156 阅读

1 ·

CC 4.0 BY-SA版权

在ie6中使用float属性的注意事项！它的源代码和实验结果如下！

 <style type="text/css">  div#demo1,div#demo2{ height:150px; width:150px; border:1px solid #0000FF; background:#99CC00;}  #parent{ height:200px; width:600px; border:1px solid #FF0000; margin:0 auto;} #demo1{ margin-left:50px; float:left;} #demo2{ margin-right:50px; float:right;} </style> </head> <body>  <div id="parent">  <div id="demo1"></div> <div id="demo2"></div> </div> 
</body

> 而在ie6以上的版本中和firefox中的实验结果如下！

[img]http://dl2.iteye.com/upload/attachment/0086/6565/3ab504b7-306e-34bb-a240-764c1d6f8d65.png[/img][img]http://dl2.iteye.com/upload/attachment/0086/6562/3fed17be-1915-3fab-933f-2473111a3063.png[/img]

我们可以很明显的看到，在ie6以及firefox浏览器中，离红色边框的距离要小的多！而ie6距离边框的距离是ie6以上版本的二倍，这是ie6中特有的现象——双倍边距。如果我们想解决这个问题我认为有两种方法！ 1#demo1,#demo2{ display:inline} 2专门针对ie写语句  就搞定了！至于3像素问题：就是说在ie6中环绕在元素周围的内容会自动的增加3像素的距离！解决方案：针对这个问题，我们也可以专门针对ie6写样式！此方法与上面类似。就省略不写了！