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

最新推荐文章于 2021-01-31 18:29:18 发布

liujiajie1990

最新推荐文章于 2021-01-31 18:29:18 发布

阅读量1.9k

点赞数

分类专栏： IE6常见bug整理文章标签： ie class xhtml float html

本文链接：https://blog.csdn.net/liujiajie1990/article/details/7739789

版权

IE6常见bug整理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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我简称他为（伪块元素）

liujiajie1990

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE6-浮动margin产生双倍距离的问题

*{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;displ
复制链接

扫一扫