浮动后IE6双倍边距问题

时间:2019-11-13
本文章向大家介绍浮动后IE6双倍边距问题,主要包括浮动后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>

原文地址:https://www.cnblogs.com/xuanxuanya/p/11849758.html