浮动后IE6双倍边距问题

Posted 2020-11-22 xuanxuanya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动后IE6双倍边距问题相关的知识，希望对你有一定的参考价值。

IE6的双倍边距bug

在IE6中，当为一个向左浮动的元素设置左外边距时，这个外边距将会是设置值的2倍

1，添加一个样式来解决ie6的双倍边距问题

对于一个浮动元素来说设置display：inline没有任何意义

但是该属性可以解决IE6的双倍边距问题

display:inline；

2，或者为IE6单独设置外边距

_margin-left：50px,边距设为其他浏览器的一半

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7         /*清除外边距*/
 8         *{
 9             margin: 0px;
10             padding: 0px;
11         }
12             .box{
13                 background-color: yellow;
14                 width: 100px;
15                 height: 100px;
16                 /*设置浮动*/
17                 float: left;
18                 
19                 /*解决办法1，为IE6单独设置一个外边距*/
20                 margin-left: 100px;
21                 /*_margin-left:50px*/
22                 
23                 /*解决办法2，设置一个样式*/
24                 display: inline;
25             }
26         </style>
27     </head>
28     <body>
29         <div class="box"></div>
30     </body>
31 </html>

以上是关于浮动后IE6双倍边距问题的主要内容，如果未能解决你的问题，请参考以下文章