、
這樣的標(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)好幾次遇到這樣的問(wèn)題，在Firefox和Safari顯示完好的頁(yè)面，卻在IE6下顯得慘不忍睹。如果Explorer7也出現(xiàn)了這樣的問(wèn)題，那可能是遺失了“<”或者“>”之故。為了些可預(yù)見(jiàn)性的問(wèn)題，其他瀏覽器都會(huì)注意這個(gè)問(wèn)題，唯獨(dú)Explorer。我經(jīng)常使用Firefox的HTMLvalidator插件驗(yàn)證頁(yè)面代碼。#p#
保持清除浮動(dòng)
總會(huì)有頁(yè)面要將某個(gè)元素浮動(dòng)起來(lái)，如果是定寬的那么還好辦。如果是不定寬度的，那么要清除下浮動(dòng)--畢竟其他元素不一定都是浮動(dòng)的。總之，時(shí)刻記得清除浮動(dòng)是個(gè)好的習(xí)慣（譯注：也可以參看我以前的文章：《CSS別忘記清除浮動(dòng)》）。
調(diào)試的技巧
雖然有多年針對(duì)IE6的CSS調(diào)試經(jīng)驗(yàn)，一些常見(jiàn)的問(wèn)題我知道如何去解決，但真的碰到很頭痛的問(wèn)題時(shí)，那時(shí)我通常會(huì)這樣解決：
◆打開(kāi)電腦，載入IE6
◆確保安裝了IEAccessibility工具條
◆點(diǎn)擊工具條上的“編輯CSS”
◆然后我開(kāi)始“變魔術(shù)”
◆尋找錯(cuò)誤
設(shè)定背景色
我經(jīng)常會(huì)在指定的大塊元素上設(shè)定個(gè)背景色
- #content{
- background-color:red;
- }
-
- #sidebar{
- background-color:blue;
- }
這能讓我知道是哪塊元素出了問(wèn)題（譯注：我喜歡用“red”高亮，因?yàn)楹么蚨绎@眼）。
隱藏元素
然后開(kāi)始逐級(jí)的隱藏該塊元素中的內(nèi)容，首先是最大的塊
- #sidebar{
- display:none;
- }
-
如果問(wèn)題消失了，那么再逐級(jí)在塊中尋找出問(wèn)題的元素，比如
- #sidebar.sub-item{
- display:none;
- }
-
或者
- #sidebar.sub-item.sub-sub-item{
- display:none;
- }
-
使用這一方法，通常就能精確的定位哪個(gè)元素造成的問(wèn)題（按照經(jīng)驗(yàn)通常是
或者是
）。#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就能解決問(wèn)題。然后我會(huì)使用Google搜索網(wǎng)上是否有相應(yīng)的Bug記錄。
解決問(wèn)題
當(dāng)我找到解決該問(wèn)題的辦法以后，通常我會(huì)將其放到名為ie6.css文件中，然后只讓IE6載入該CSS。當(dāng)然，要確定該樣式會(huì)覆蓋原先定義的樣式。
譯注：當(dāng)然也可以使用CSSHacks，但不推薦這樣做，原因之一是要“保持CSS簡(jiǎn)單”。
本文出自：http://www.gracecode.com/Archive/Display/2523
【編輯推薦】
- IE6下使用CSS定義DIV高度行之有效的辦法
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- IE6 IE7 IE8三個(gè)版本的CSS兼容速查手冊(cè)
- DIV+CSS兼容IE6、IE7、Firefox方法探究
- 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問(wèn)題
當(dāng)前文章：技術(shù)分享在IE6下調(diào)試CSS方法揭秘
網(wǎng)站URL：
http://uogjgqi.cn/article/coihoid.html
掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
