網(wǎng)頁前端開發(fā)IE BUG系列之雙邊距BUG

該BUG影響IE版本 IE6

癥狀： 浮動元素上的左右邊距是雙倍的

說明

CSS的浮動屬性被很多web開發(fā)者使用。不僅因為它能夠讓內容圍繞在浮動元素的周圍，而且在許多情況下可以通過設定浮動元素的邊距來進行布局。IE開發(fā)者由于某些原因認為增加雙倍邊距是一個好的做法，所以這個bug被叫做“雙邊距Bug”。下面是這個bug的演示例子。

HTML Code:

<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>

CSS Code:

		#container {
    overflow: hidden; /* contain float - irrelevant to the bug */
}
    #inner {
        float: left;
        margin-left: 2em;
    }

在這個demo中，我們在#inner上同時使用了float和margin-left，觸發(fā)了雙邊距bug。 根據(jù)字體，在正常的瀏覽器和ie7中，#inner的左邊緣在數(shù)字4或5的附近。在IE版本低于7（在IE5，5.5和6測試）左邊緣將在數(shù)字9或0的附近，表明了我們邊距是雙倍的。 如果你設置右邊距在一個浮動元素上，這種情況同樣會發(fā)生。你用margin-left或是簡寫去設置邊距效果是一樣的。

解決方案

解決方法非常簡單。你只需要在那個被雙邊距bug影響的元素上加display: inline就可以了。下面是把解決方法應用于原來的demo：

HTML Code:

<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>

CSS Code:

		#container {
    overflow: hidden; /* contain float - irrelevant to the bug */
}
    #inner {
        float: left;
        margin-left: 2em;
        display: inline;
    }

和原來的demo沒有多大的區(qū)別，但是bug不再出現(xiàn)了。添加display:inline解決這個bug是安全的，因為它被所有標準兼容的瀏覽器忽略。如果你覺得還有更好的方法的話，歡迎留言添加。