您的位置：首页 > 其它

IE6-浮动margin产生双倍距离的问题

2012-07-12 13:56 302 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
*{padding:0;margin:0;}
.wrapper{width:500px;margin:0 auto;background:red;}
.left{float:left;display:inline;width:200px;height:250px;margin-left:50px;background-color:green;}
.right{float:left;display:inline;width:200px;height:250px;margin-left:50px;background-color:yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

自己的理解结合网上知识

解决的方法是给浮动的元素加上display:inline;为什么要加inline呢？

因为left对象是相对于他的父级时才会产生双倍的距离，【只有第一个相对于父级浮动的子元素才会产生双倍的margin】

inline是不存在双倍距离的问题的而且在left对象浮动的时候触发了ie6的特有属性haslayout把inline转换成了inline-block

因为inline-block他是行内块元素他支持给他定义高度宽度和margin我简称他为（伪块元素）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航