解决IE6双倍边距bug问题
程序员文章站
2022-04-16 09:53:01
...
出现双边距一般都是在排版中遇到的问题。
IE6 的双倍边距bug：
在IE6中，当为一个向左浮动的元素添加左外边距，或者为一个向右浮动的元素添加右外边距时，
这个外边距值将会是设置的值的两倍
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双倍边距问题</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
float: left;
margin: 100px;
/*解决IE6中的这个问题：*/
/*
* 添加一个样式来解决，对于浮动元素来说设置display：inline没有任何意义
* 但是该属性可以解决IE6的双倍边距问题
*/
display: inline;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>IE6是这样子
谷歌、火狐和IE6以上版本是这样子
明显是比设置的边距值大了，仔细量的话，就是设置值的两倍
解决IE6中的这个问题：
添加一个样式来解决，对于浮动元素来说设置display：inline没有任何意义
但是该属性可以解决IE6的双倍边距问题
设置完这个属性在IE6中就可以正常显示啦！