IE6双倍边距
2019獨角獸企業重金招聘Python工程師標準>>>
前言:IE6雙倍邊距這個問題其實早在學習CSS之初都已經知道如何解決,但當時只知道如何解決而并不知道引起這個BUG的原因是什么,再接下來工 作過程中不斷實踐也終于明白是怎么回事了。但最近開發項目逐漸轉移到以IE7為IE的基礎參考標準后,逐漸有點淡忘IE6下的一些詭異BUG的解決方案 了,就是知道如何解決也忘了部分理論知識了。
1、問題:在IE6下如果某個標簽使用了float屬性,同時設置了其外補丁“margin:10px 0 0 10px”可以看出,上邊距和左邊距同樣為10px,但第一個對象距左邊有20px。
2、解決辦法:當將其display屬性設置為inline時問題就都解決了。
3、說明:這是因為塊級對象默認的display屬性值是block,當設置了浮動的同時,還設置了它的外邊距就會出現這種情況。也許你會問:“為 什么第二個對象和第一個對象之間就不存在雙倍邊距的BUG”?因為浮動都有其相對應的對象,只有相對于其父對象的浮動對象才會出現這樣的問題。第一個對象 是相對父對象的,而第二個對象是相對第一個對象的,所以第二個對象在設置后不會出現問題。另外在一些特殊布局中,可能需要組合使用 display:block;和display:inline;才能達到預期效果。
當然最壞的情況下,我們就可以使用"margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px",這種“標準屬性;*IE7識別屬性;_IE6識別屬性”HACK方式解決。
4、總結:這個現象僅當塊級對象設置了浮動屬性后才會出現,內聯對象(行級對象)不會出現此問題。并且只有設置左邊距和右邊距的值才會出問題,上下邊距不會出現問題。
轉載于:https://my.oschina.net/pureboys/blog/79547
總結
- 上一篇: 梦到分手很久的前男友是什么意思
- 下一篇: c简单的链表错误及改正