解決IE6下margin雙倍邊距問題
本文向大家描述一下解決IE6下margin雙倍邊距問題的方法,首先讓我們來看一下問題的產(chǎn)生。
解決IE6下margin雙倍邊距問題
問題:
在IE6下如果某個標(biāo)簽使用了float屬性,同時設(shè)置了其外補丁“margin:10px0010px”可以看出,上邊距和左邊距同樣為10px,但第一個對象距左邊有20px。
解決辦法:
當(dāng)將其display屬性設(shè)置為inline時問題就都解決了。
說明:這是因為塊級對象默認(rèn)的display屬性值是block,當(dāng)設(shè)置了浮動的同時,還設(shè)置了它的外邊距就會出現(xiàn)這種情況。也許你會問:“為什么第二個對象和第一個對象之間就不存在雙倍邊距的BUG”?因為浮動都有其相對應(yīng)的對象,只有相對于其父對象的浮動對象才會出現(xiàn)這樣的問題。第一個對象是相對父對象的,而第二個對象是相對第一個對象的,所以第二個對象在設(shè)置后不會出現(xiàn)問題。另外在一些特殊布局中,可能需要組合使用display:block;和display:inline;才能達到預(yù)期效果。
當(dāng)然最壞的情況下,我們就可以使用"margin:10px0010px;_margin:10px005px",這種“標(biāo)準(zhǔn)屬性;_IE6識別屬性”HACK方式解決。
◆注意:
這個現(xiàn)象僅當(dāng)塊級對象設(shè)置了浮動屬性后才會出現(xiàn),內(nèi)聯(lián)對象(行級對象)不會出現(xiàn)此問題。并且只有設(shè)置左邊距和右邊距的值才會出問題,上下邊距不會出現(xiàn)問題。使用display:inline方法僅限于使用float時使用,否則顯示會出現(xiàn)問題。多個子塊在父塊中使用float時,同行顯示的多個子塊只需要第一個使用display:inline
本文來自CSDN博客,轉(zhuǎn)載請標(biāo)明出處:http://blog.csdn.net/linkaisheng/archive/2010/04/24/5522487.aspx
【編輯推薦】