CSS——margin的IE6兼容问题

最新推荐文章于 2020-08-19 21:15:03 发布

mintsolace

最新推荐文章于 2020-08-19 21:15:03 发布

阅读量176

点赞数

分类专栏： css 学习笔记

本文链接：https://blog.csdn.net/mintsolace/article/details/89320783

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

        	*{
        		margin:0;
        		padding: 0;
        	}
			ul{
				border: 1px solid #000;
				height:100px;
				list-style: none;
			}
			ul li{
				float:left;
				width:120px;
				height:40px;
				margin-left: 40px;
				background-color:orange;
			}
        </style>
    </head>
    <body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
    </body>

以上代码在IE6中会出现双倍margin bug：
当出现两个以上连续浮动的元素，携带和浮动方向相同的margin时，队首的元素会双倍margin。
解决方案：

使浮动的方向和margin的方向相反（前端工程师特别喜欢这样做。）

float:left;
margin-right:40px;

使用hack（没必要）：单独给队首的元素写一个一半的margin

<li class="no1"></li>

ul li.no1{
		_margin-left:20px;
}

IE6的3px bug

        *{
        	margin:0;
        	padding: 0;
        }
		div{
			width:400px;
			height:400px;
			background-color:orange;
		}
		div p{
			margin-left:20px;
			width:100px;
			height:100px;
			background-color:green;
		}

以上代码在IE6中margin-left会变成23px
解决方法：不用管，因为根本不允许用儿子踹父亲。如果你出现了3px bug，说明你的代码不标准。

mintsolace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——margin的IE6兼容问题

*{ margin:0; padding: 0; } ul{ border: 1px solid #000; height:100px; list-style: none; } ul li{ float:left; width:120px; height:4...
复制链接

扫一扫