CSS——margin的IE6兼容问题

mintsolace

于 2019-04-15 21:03:22 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： css 学习笔记

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/89320783

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

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文详细解析了IE6浏览器中常见的CSS Bug，包括双倍margin bug和3px bug，并提供了有效的解决方案，如调整浮动方向和使用特定的hack技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        	*{
        		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，说明你的代码不标准。