問題:在ie6下如果某個標籤使用了float屬性,同時設定了其外補丁「margin:10px 0 0 10px」可以看出,上邊距和左邊距同樣為10px,但第乙個物件距左邊有20px。
解決辦法:
方法一、當將其display屬性設定為inline時問題就都解決了。
說明:這是因為塊級物件預設的 display屬性值是block,當設定了浮動的同時,還設定了它的外邊距就會出現這種情況。也許你會問:「為什麼第二個物件和第乙個物件之間就不存在 雙倍邊距的bug」?因為浮動都有其相對應的物件,只有相對於其父物件的浮動物件才會出現這樣的問題。第乙個物件是相對父物件的,而第二個物件是相對第一 個物件的,所以第二個物件在設定後不會出現問題。另外在一些特殊布局中,可能需要組合使用display:block;和display:inline; 才能達到預期效果。
當然最壞的情況下,我們就可以使用"margin:10px 0 0 10px;_margin:10px 0 0 5px",這種「標準屬性;_ie6識別屬性」hack方式解決。
注意:這個現象僅當塊級物件設定
了浮動屬性後才會出現,內聯物件(行級物件)不會出現此問題。並且只有設定左邊距和右邊距的值才會出問題,上下邊距不會出現問題。使用
display:inline方法僅限於使用float時使用,否則顯示會出現問題。多個子塊在父塊中使用float時,同行顯示的多個子塊只需要第乙個
使用display:inline
方法二、
可以使用以下辦法來書寫相容瀏覽器的css**:
第一種:.div
第二種:.div
第三種:#div/*ff*/
*html#div/*ie6*/
*+html#div/*ie7*/
IE6雙倍margin間距兩大解決方案
ie6雙倍margin間距兩大解決方案 ie6雙倍margin間距解決方法 方法1 假設 乙個div 為 當乙個css樣式同時設定了float和margin的屬性的時候,在ie7 及火狐上,該元素顯示正常。但是在ie6下,將會出現雙倍的margin left屬性值,也就是上面那段 中的div在ie6...
IE6雙倍margin間距兩大解決方案
本文向大家描述一下ie6雙倍margin間距解決方法,這裡主要從兩個方面來向大家介紹,相信本文介紹一定會讓你有所收穫。ie6雙倍margin間距解決方法 方法1 假設 乙個div 為 divstyle divstyle float left margin left 10px div 當乙個css樣式...
IE6雙倍邊距 IE6瀏覽器會出現雙倍邊距解決方法
所謂的ie6雙倍邊距就是指當元素有float屬性,又有margin屬性時,在ie6下程式設計客棧面顯示的margin的值是設定值的兩倍。下面的 摺疊展開xml html code 複製 如下 ie6顯示效果為 ie8顯示效果為 可以看得出來左邊距在ie6下面明顯比ie8下面的大,在ie6下面的左邊距...