出現雙邊距一般都是在排版中遇到的問題。
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中就可以正常顯示啦!