技術分享在IE6下調試CSS方法揭秘

作者：imgiseverything.co.u 2010-08-18 16:18:59

開發前端

本文向大家描述一下在IE6下調試CSS方法，由于IE6糟糕的盒模型，你必須要小心。如果你需要將一元素設置了寬度，注意避免再將其上設定margin、padding。

你對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插件驗證頁面代碼。#p#

保持清除浮動

總會有頁面要將某個元素浮動起來，如果是定寬的那么還好辦。如果是不定寬度的，那么要清除下浮動--畢竟其他元素不一定都是浮動的。總之，時刻記得清除浮動是個好的習慣（譯注：也可以參看我以前的文章：《CSS別忘記清除浮動》）。

調試的技巧

雖然有多年針對IE6的CSS調試經驗，一些常見的問題我知道如何去解決，但真的碰到很頭痛的問題時，那時我通常會這樣解決：

◆打開電腦，載入IE6
◆確保安裝了IEAccessibility工具條
◆點擊工具條上的“編輯CSS”
◆然后我開始“變魔術”
◆尋找錯誤

設定背景色

我經常會在指定的大塊元素上設定個背景色

#content{  
background-color:red;  
}  
 
#sidebar{  
background-color:blue;  
}

這能讓我知道是哪塊元素出了問題（譯注：我喜歡用“red”高亮，因為好打而且顯眼）。

隱藏元素

然后開始逐級的隱藏該塊元素中的內容，首先是最大的塊

#sidebar{  
display:none;  
}

如果問題消失了，那么再逐級在塊中尋找出問題的元素，比如

#sidebar.sub-item{  
display:none;  
}

或者

#sidebar.sub-item.sub-sub-item{  
display:none;  
}

使用這一方法，通常就能精確的定位哪個元素造成的問題（按照經驗通常是<div>或者是<p>）。#p#

尋找解決方案

IE6是頭“烈馬”，它會按照自己的規則去渲染CSS。當找到對應的元素后，下面有些經驗式的解決方案可以參考一下：

#sidebar.sub-item.sub-subitem{  
/*trysettingthisifit’snotalreadyset-itsometimesworkswonders*/  
position:relative;  
 
/*display:inlineoftenfixesthedoublemarginfloatbugand*/  
display:inline;  
 
/*Sometimesthisjustfixesproblems-noideawhy*/  
display:inline-block;  
 
/*margincanbeakillersotakeitoffcompletelyseeiftheproblemgoesaway*/  
margin:0;  
 
/*sameasmargin*/  
padding:0;  
 
/*SometimesIE6hatesbackgroundcoloursnotbeingdeclared*/  
background-color:transparent;  
 
/*cansometimesstopcolumnstoowidefrombreakingalayout*/  
overflow:hidden;  
 
/*SometimesforceshasLayoutandfixesthings*/  
zoom:1;  
}

我經常會碰到改變它的margin和display就能解決問題。然后我會使用Google搜索網上是否有相應的Bug記錄。

解決問題

當我找到解決該問題的辦法以后，通常我會將其放到名為ie6.css文件中，然后只讓IE6載入該CSS。當然，要確定該樣式會覆蓋原先定義的樣式。

譯注：當然也可以使用CSSHacks，但不推薦這樣做，原因之一是要“保持CSS簡單”。

本文出自：http://www.gracecode.com/Archive/Display/2523

【編輯推薦】

IE6下使用CSS定義DIV高度行之有效的辦法
探究IE8與IE7具體功能中窗口功能按鈕的變化
IE6 IE7 IE8三個版本的CSS兼容速查手冊
DIV+CSS兼容IE6、IE7、Firefox方法探究
技術前沿一段JS代碼輕松解決IE6-IE8的兼容性問題

責任編輯：佚名來源： Gracecode.com

IE6 CSS

技術分享 在IE6下調試CSS方法揭秘

技術分享在IE6下調試CSS方法揭秘