DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 解決IE6下margin雙倍邊距問題
解決IE6下margin雙倍邊距問題
編輯:CSS詳解     

本文向大家描述一下解決IE6下margin雙倍邊距問題的方法,首先讓我們來看一下問題的產生。

解決IE6下margin雙倍邊距問題

問題:

在IE6下如果某個標簽使用了float屬性,同時設置了其外補丁“margin:10px0010px”可以看出,上邊距和左邊距同樣為10px,但第一個對象距左邊有20px。

解決辦法:

當將其display屬性設置為inline時問題就都解決了。

說明:這是因為塊級對象默認的display屬性值是block,當設置了浮動的同時,還設置了它的外邊距就會出現這種情況。也許你會問:“為什麼第二個對象和第一個對象之間就不存在雙倍邊距的BUG”?因為浮動都有其相對應的對象,只有相對於其父對象的浮動對象才會出現這樣的問題。第一個對象是相對父對象的,而第二個對象是相對第一個對象的,所以第二個對象在設置後不會出現問題。另外在一些特殊布局中,可能需要組合使用display:block;和display:inline;才能達到預期效果。

當然最壞的情況下,我們就可以使用"margin:10px0010px;_margin:10px005px",這種“標准屬性;_IE6識別屬性”HACK方式解決。

◆注意:

這個現象僅當塊級對象設置了浮動屬性後才會出現,內聯對象(行級對象)不會出現此問題。並且只有設置左邊距和右邊距的值才會出問題,上下邊距不會出現問題。使用display:inline方法僅限於使用float時使用,否則顯示會出現問題。多個子塊在父塊中使用float時,同行顯示的多個子塊只需要第一個使用display:inline

本文來自CSDN博客,轉載請標明出處:http://blog.csdn.Net/linkaisheng/archive/2010/04/24/5522487.ASPx

【編輯推薦】

  1. CSS margin-bottom 屬性使用手冊
  2. IE6.0對padding的解讀分析
  3. DIV+CSS網頁錯位診斷和解決方法
  4. 深入學習CSS中padding、margin屬性寫法
  5. 技術分享 如何使用CSS控制超鏈接文字樣式
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved