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

該BUG影響IE版本 IE6

癥狀： 浮動(dòng)元素上的左右邊距是雙倍的

說明

CSS的浮動(dòng)屬性被很多web開發(fā)者使用。不僅因?yàn)樗軌蜃寖?nèi)容圍繞在浮動(dòng)元素的周圍，而且在許多情況下可以通過設(shè)定浮動(dòng)元素的邊距來進(jìn)行布局。IE開發(fā)者由于某些原因認(rèn)為增加雙倍邊距是一個(gè)好的做法，所以這個(gè)bug被叫做“雙邊距Bug”。下面是這個(gè)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;
    }

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

解決方案

解決方法非常簡(jiǎn)單。你只需要在那個(gè)被雙邊距bug影響的元素上加display: inline就可以了。下面是把解決方法應(yīng)用于原來的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解決這個(gè)bug是安全的，因?yàn)樗凰袠?biāo)準(zhǔn)兼容的瀏覽器忽略。如果你覺得還有更好的方法的話，歡迎留言添加。