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