DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 技術分享 在IE6下調試CSS方法揭秘(1)
技術分享 在IE6下調試CSS方法揭秘(1)
編輯:CSS詳解     

你對IE6調試CSS的方法是否了解,這裡和大家分享一下,主要介紹原作者的針對IE6調試CSS的一些經驗。

在IE6下調試CSS方法

由於IE6糟糕的盒模型,你必須要萬分小心。如果你需要將一元素設置了寬度,注意避免再將其上設定margin、padding(左邊或者右邊)。我會在其上再包裹一層元素。

防患於未然

坦白的講,我每天都會話很多時間用於調試IE6的CSS問題上。下面是一些小Tips可以確保IE6最大限度的返回你期望的效果。不幸的是,並不是每個人都知道它們(譯注:作者有些“危言聳聽”)。

重置默認樣式

重置默認樣式可以最大限度的避免浏覽器差異,最簡單的樣式重置通常可以這樣寫

  1. *{
  2. margin:0;
  3. padding:0;
  4. }

如果你覺得這樣“太過於簡單”,可以參考YUIReset和EricMeyer'sReset。

不要在同一元素上同時聲明margin/padding的寬度

由於IE6糟糕的盒模型,你必須要萬分小心。如果你需要將一元素設置了寬度,注意避免再將其上設定margin、padding(左邊或者右邊)。我會在其上再包裹一層元素,比如<p>、<ul>、<table>、<hr>這樣的標簽。

在大多數情況下,設計師會統一同一種元素的樣式,比如段落的內間距(padding)統一為8px到20px(通常為10px)

  1. p{
  2. padding:010px;
  3. }

這是個非常好的定義。

◆另外:我一直使用像素(pixels)作為margin和padding的單位,因為如果使用em,那麼可能在使用不同的字體造成不同的寬度差異。

校驗XHTML、Html

我已經好幾次遇到這樣的問題,在Firefox和Safari顯示完好的頁面,卻在IE6下顯得慘不忍睹。如果Explorer7也出現了這樣的問題,那可能是遺失了“<”或者“>”之故。為了些可預見性的問題,其他浏覽器都會注意這個問題,唯獨Explorer。我經常使用Firefox的Htmlvalidator插件驗證頁面代碼。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved