解決IE6雙倍邊距bug問題

出現雙邊距一般都是在排版中遇到的問題。

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中就可以正常顯示啦!

 

 

發佈了42 篇原創文章 · 獲贊 4 · 訪問量 1788
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章