你對IE6調試CSS的方法是否了解,這裡和大家分享一下,主要介紹原作者的針對IE6調試CSS的一些經驗。
在IE6下調試CSS方法
由於IE6糟糕的盒模型,你必須要萬分小心。如果你需要將一元素設置了寬度,注意避免再將其上設定margin、padding(左邊或者右邊)。我會在其上再包裹一層元素。
防患於未然
坦白的講,我每天都會話很多時間用於調試IE6的CSS問題上。下面是一些小Tips可以確保IE6最大限度的返回你期望的效果。不幸的是,並不是每個人都知道它們(譯注:作者有些“危言聳聽”)。
重置默認樣式
重置默認樣式可以最大限度的避免浏覽器差異,最簡單的樣式重置通常可以這樣寫
- *{
- margin:0;
- padding:0;
- }
如果你覺得這樣“太過於簡單”,可以參考YUIReset和EricMeyer'sReset。
不要在同一元素上同時聲明margin/padding的寬度
由於IE6糟糕的盒模型,你必須要萬分小心。如果你需要將一元素設置了寬度,注意避免再將其上設定margin、padding(左邊或者右邊)。我會在其上再包裹一層元素,比如<p>、<ul>、<table>、<hr>這樣的標簽。
在大多數情況下,設計師會統一同一種元素的樣式,比如段落的內間距(padding)統一為8px到20px(通常為10px)
- p{
- padding:010px;
- }
這是個非常好的定義。
◆另外:我一直使用像素(pixels)作為margin和padding的單位,因為如果使用em,那麼可能在使用不同的字體造成不同的寬度差異。
校驗XHTML、Html
我已經好幾次遇到這樣的問題,在Firefox和Safari顯示完好的頁面,卻在IE6下顯得慘不忍睹。如果Explorer7也出現了這樣的問題,那可能是遺失了“<”或者“>”之故。為了些可預見性的問題,其他浏覽器都會注意這個問題,唯獨Explorer。我經常使用Firefox的Htmlvalidator插件驗證頁面代碼。