盗墓笔记有声小说,yy玄幻小说排行榜完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

技術(shù)分享在IE6下調(diào)試CSS方法揭秘

你對IE6調(diào)試CSS的方法是否了解，這里和大家分享一下，主要介紹原作者的針對IE6調(diào)試CSS的一些經(jīng)驗。

在IE6下調(diào)試CSS方法

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

防患于未然

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

重置默認(rèn)樣式

重置默認(rèn)樣式可以最大限度的避免瀏覽器差異，最簡單的樣式重置通常可以這樣寫

 
 
 
  
  
  *{  
  
  
  margin:0;  
  
  
  padding:0;  
  
  
  }

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

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

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

、

在大多數(shù)情況下，設(shè)計師會統(tǒng)一同一種元素的樣式，比如段落的內(nèi)間距（padding）統(tǒng)一為8px到20px（通常為10px）

 
 
 
  
  
  p{  
  
  
  padding:010px;  
  
  
  }

這是個非常好的定義。

◆另外：我一直使用像素（pixels）作為margin和padding的單位，因為如果使用em，那么可能在使用不同的字體造成不同的寬度差異。

校驗XHTML、HTML

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

保持清除浮動

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

調(diào)試的技巧

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

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

設(shè)定背景色

我經(jīng)常會在指定的大塊元素上設(shè)定個背景色

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

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

隱藏元素

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

 
 
 
  
  
  #sidebar{  
  
  
  display:none;  
  
  
  }

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

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

或者

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

使用這一方法，通常就能精確的定位哪個元素造成的問題（按照經(jīng)驗通常是

或者是

）。#p#

尋找解決方案

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

 
 
 
  
  
  #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)常會碰到改變它的margin和display就能解決問題。然后我會使用Google搜索網(wǎng)上是否有相應(yīng)的Bug記錄。

解決問題

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

新聞中心

其他資訊