技術(shù)分享 在IE6下調(diào)試CSS方法揭秘
你對(duì)IE6調(diào)試CSS的方法是否了解，這里和大家分享一下，主要介紹原作者的針對(duì)IE6調(diào)試CSS的一些經(jīng)驗(yàn)。
在IE6下調(diào)試CSS方法
由于IE6糟糕的盒模型，你必須要萬分小心。如果你需要將一元素設(shè)置了寬度，注意避免再將其上設(shè)定margin、padding（左邊或者右邊）。我會(huì)在其上再包裹一層元素。
防患于未然
坦白的講，我每天都會(huì)話很多時(shí)間用于調(diào)試IE6的CSS問題上。下面是一些小Tips可以確保IE6最大限度的返回你期望的效果。不幸的是，并不是每個(gè)人都知道它們（譯注：作者有些“危言聳聽”）。
重置默認(rèn)樣式
重置默認(rèn)樣式可以最大限度的避免瀏覽器差異，最簡單的樣式重置通?？梢赃@樣寫
- *{
- margin:0;
- padding:0;
- }
如果你覺得這樣“太過于簡單”，可以參考YUIReset和EricMeyer'sReset。
不要在同一元素上同時(shí)聲明margin/padding的寬度
由于IE6糟糕的盒模型，你必須要萬分小心。如果你需要將一元素設(shè)置了寬度，注意避免再將其上設(shè)定margin、padding（左邊或者右邊）。我會(huì)在其上再包裹一層元素，比如<p>、<ul>、<table>、<hr>這樣的標(biāo)簽。
在大多數(shù)情況下，設(shè)計(jì)師會(huì)統(tǒng)一同一種元素的樣式，比如段落的內(nèi)間距（padding）統(tǒng)一為8px到20px（通常為10px）
- p{
- padding:010px;
- }
這是個(gè)非常好的定義。
◆另外：我一直使用像素（pixels）作為margin和padding的單位，因?yàn)槿绻褂胑m，那么可能在使用不同的字體造成不同的寬度差異。
校驗(yàn)XHTML、HTML
我已經(jīng)好幾次遇到這樣的問題，在Firefox和Safari顯示完好的頁面，卻在IE6下顯得慘不忍睹。如果Explorer7也出現(xiàn)了這樣的問題，那可能是遺失了“<”或者“>”之故。為了些可預(yù)見性的問題，其他瀏覽器都會(huì)注意這個(gè)問題，唯獨(dú)Explorer。我經(jīng)常使用Firefox的HTMLvalidator插件驗(yàn)證頁面代碼。#p#
保持清除浮動(dòng)
總會(huì)有頁面要將某個(gè)元素浮動(dòng)起來，如果是定寬的那么還好辦。如果是不定寬度的，那么要清除下浮動(dòng)--畢竟其他元素不一定都是浮動(dòng)的。總之，時(shí)刻記得清除浮動(dòng)是個(gè)好的習(xí)慣（譯注：也可以參看我以前的文章：《CSS別忘記清除浮動(dòng)》）。
調(diào)試的技巧
雖然有多年針對(duì)IE6的CSS調(diào)試經(jīng)驗(yàn)，一些常見的問題我知道如何去解決，但真的碰到很頭痛的問題時(shí)，那時(shí)我通常會(huì)這樣解決：
◆打開電腦，載入IE6
◆確保安裝了IEAccessibility工具條
◆點(diǎn)擊工具條上的“編輯CSS”
◆然后我開始“變魔術(shù)”
◆尋找錯(cuò)誤
設(shè)定背景色
我經(jīng)常會(huì)在指定的大塊元素上設(shè)定個(gè)背景色
- #content{
- background-color:red;
- }
- #sidebar{
- background-color:blue;
- }
這能讓我知道是哪塊元素出了問題（譯注：我喜歡用“red”高亮，因?yàn)楹么蚨绎@眼）。
隱藏元素
然后開始逐級(jí)的隱藏該塊元素中的內(nèi)容，首先是最大的塊
- #sidebar{
- display:none;
- }
如果問題消失了，那么再逐級(jí)在塊中尋找出問題的元素，比如
- #sidebar.sub-item{
- display:none;
- }
或者
- #sidebar.sub-item.sub-sub-item{
- display:none;
- }
使用這一方法，通常就能精確的定位哪個(gè)元素造成的問題（按照經(jīng)驗(yàn)通常是<div>或者是<p>）。#p#
尋找解決方案
IE6是頭“烈馬”，它會(huì)按照自己的規(guī)則去渲染CSS。當(dāng)找到對(duì)應(yīng)的元素后，下面有些經(jīng)驗(yàn)式的解決方案可以參考一下：
- #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;
- }
我經(jīng)常會(huì)碰到改變它的margin和display就能解決問題。然后我會(huì)使用Google搜索網(wǎng)上是否有相應(yīng)的Bug記錄。
解決問題
當(dāng)我找到解決該問題的辦法以后，通常我會(huì)將其放到名為ie6.css文件中，然后只讓IE6載入該CSS。當(dāng)然，要確定該樣式會(huì)覆蓋原先定義的樣式。
譯注：當(dāng)然也可以使用CSSHacks，但不推薦這樣做，原因之一是要“保持CSS簡單”。
本文出自：http://www.gracecode.com/Archive/Display/2523
【編輯推薦】
- IE6下使用CSS定義DIV高度行之有效的辦法
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- IE6 IE7 IE8三個(gè)版本的CSS兼容速查手冊
- DIV+CSS兼容IE6、IE7、Firefox方法探究
- 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題
