双倍浮向(双倍边距)(只有IE6出现)

声明: web前端学习笔记,欢迎大神指点。联系QQ:1522025433.

描述:在IE6中,一个居左(或居右)浮动的元素放置进一个容器盒(box),并在浮动元素上使用了左边距(或右边距) 在ie6内便产生双倍边距。
hack:给浮动元素添加声明:display:inline;

案例代码:

 1  1     <title>IE6双倍边距</title>
 2  2     <style type="text/css">
 3  3         *{
 4  4             margin: 0;
 5  5             padding: 0;
 6  6         }
 7  7 
 8  8         .box1 {
 9  9             /*display: inline; 给产生双倍间距的元素添加此属性即可恢复正常*/
10 10             float: left;
11 11             width: 100px;
12 12             height: 100px;
13 13             margin: 0 50px;
14 14             background: orange;
15 15         }
16 16 
17 17         .box2 {
18 18             float: left;
19 19             width: 100px;
20 20             height: 100px;
21 21             background: green;
22 22         }
23 23 
24 24 
25 25     </style>

 

html:

1 <body>
2     <div class="box1"></div>
3     <div class="box2"></div>
4 </body>

正常浏览器效果:

在ie6浏览器:

可见在ie6中产生了双倍间距,

决绝方法给产生双倍间距的浮动元素添加  display:inline; j即可解决问题。

 

posted @ 2018-08-17 11:30  暗恋桃埖源  阅读(741)  评论(0编辑  收藏  举报