西西軟件下載最安全的下載網(wǎng)站、值得信賴的軟件下載站!

首頁(yè)編程開(kāi)發(fā)其它知識(shí) → 跨瀏覽器CSS樣式bug調(diào)試技巧分享

跨瀏覽器CSS樣式bug調(diào)試技巧分享

相關(guān)軟件相關(guān)文章發(fā)表評(píng)論 來(lái)源:西西整理時(shí)間:2013/1/22 8:50:05字體大。A-A+

作者:西西點(diǎn)擊:14次評(píng)論:0次標(biāo)簽: CSS

首先要做的是挑選一個(gè)好的瀏覽器。我的選擇是Chrome,因?yàn)樗鼡碛袕?qiáng)大的調(diào)試工具。當(dāng)我在Chrome上完成調(diào)試后,我會(huì)接著在Safari或者firefox上調(diào)試。

如果在這些“好的”瀏覽器上沒(méi)有達(dá)到期望的效果,很有可能是代碼本身違背了CSS規(guī)則。不要試圖使用hack方法來(lái)解決在這些“好的”瀏覽器上出現(xiàn)的問(wèn)題,而是應(yīng)該找出問(wèn)題的原因。通常我會(huì)檢查以下可能的BUG出處:

HTML代碼解釋 - 你是否忘記閉合一個(gè)標(biāo)簽? 你是否用一個(gè)inline元素包住一個(gè)block元素? 違背標(biāo)準(zhǔn)的代碼可能在不同的瀏覽器上被解釋呈現(xiàn)成不同的效果。

使用CSS lint工具檢查CSS代碼。留意那些檢查出來(lái)的Errors。多數(shù)情況下,Errors比Warnings更容易引發(fā)跨瀏覽器差異。

忘記使用reset樣式表,而是依靠于(不同的)瀏覽器默認(rèn)的CSS樣式。

瀏覽器支持性的差異。你是否使用了高級(jí)CSS3屬性或者HTML5元素?查看瀏覽器支持性文檔從而確保所有你的受眾的瀏覽器都被涵蓋。你需要設(shè)計(jì)“功能降級(jí)”來(lái)支持老式的瀏覽器。比如,把陰影邊框降級(jí)成邊框,或者把圓角降級(jí)成方塊。

在不該有空格的地方加上了空格,margin可能因此呈現(xiàn)得詭異。

使用了絕對(duì)定位,可是沒(méi)有設(shè)置垂直和水平偏移。這種情況下,絕對(duì)定位的元素將被呈現(xiàn)在跟position:static一樣的位置上。但是,如果你嘗試更改它的top,right,bottom或者left值,這個(gè)元素將馬上“跳”到參照于它最近的相對(duì)定位的父元素的位置。

按照“不尋!钡姆绞浇M合了不同display方式的元素。比如,W3C標(biāo)準(zhǔn)并沒(méi)有說(shuō)當(dāng)一個(gè)table-cell緊鄰一個(gè)浮動(dòng)元素時(shí)應(yīng)該是怎樣的layout。因此,這樣寫的代碼并不是錯(cuò)誤的,但可能會(huì)導(dǎo)致跨瀏覽器呈現(xiàn)不同效果的BUG。

空格是否影響了layout。你應(yīng)該不想讓排版樣式依賴于空格。

小數(shù)點(diǎn)像素值會(huì)導(dǎo)致跨瀏覽器的不同效果。

接下來(lái)正文來(lái)了

最重要的需要記住的就是,W3C標(biāo)準(zhǔn)并沒(méi)有定義錯(cuò)誤的行為。因此,如果你沒(méi)有按照規(guī)范寫,那么可能會(huì)導(dǎo)致跨瀏覽器不同效果;如果你組合“奇怪的”屬性(例如margin和inline element),那么也可能會(huì)導(dǎo)致跨瀏覽器不同效果bug。

Display

我認(rèn)為書寫CSS就像在選擇一段旅程。你需要作出一些決定.比如你要首先選擇使用不同display方式的元素:block,inline,inline-block和table。當(dāng)你選擇好以后,你可以使用一些具體的方法來(lái)改變其實(shí)際的顯示。

塊元素應(yīng)該使用margin,padding,height和width。然而line-height不適用。行內(nèi)元素應(yīng)該使用line-height,vertical align和空格符。然而margin,padding,height和width不適用。首先,表格有垂直和水平排列方式。其次,如果你遺漏了表格中的某元素,整個(gè)表格可能會(huì)有詭異的顯示。最后,margin不適用與表格的行和列,padding不適用與表格和表格的行。


Positioning

如果你選擇使用塊級(jí)元素,接下來(lái)你需要選擇position方式:

Float - 如果你使用了float,那么這個(gè)元素就變成了塊級(jí)元素,而之前作用于該元素的vertical-align和line-height屬性都將失效。

Absolute - 相對(duì)于最近的相對(duì)定位的父節(jié)點(diǎn)來(lái)計(jì)算偏移量。當(dāng)父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)改變時(shí),絕對(duì)定位的元素并不會(huì)導(dǎo)致reflow。這個(gè)特性有利于制作動(dòng)畫效果。但是,如果使用了絕對(duì)定位和動(dòng)態(tài)更改內(nèi)容將可能會(huì)導(dǎo)致顯示問(wèn)題,一個(gè)典型的例子是絕對(duì)定位的圓角框。

Static – 默認(rèn)的position方式。Fixed - 元素位置相對(duì)于瀏覽器窗口。不常使用的方式。

Relative – 通常對(duì)于該元素樣式不影響。只是其下屬的絕對(duì)定位的子節(jié)點(diǎn)將相對(duì)于該節(jié)點(diǎn)計(jì)算偏移。

在這里我就不列舉所有的display和position組合了?傊,有兩件事情需要注意:

對(duì)于我選擇的display和position方式,其他的屬性(比如margin,line-height)是不是適合?兄弟節(jié)點(diǎn)的position方式是不是契合?

比如,float,table-cell和行內(nèi)元素組合在一起是否合適?瀏覽器將如何解釋渲染?在W3C標(biāo)準(zhǔn)里有沒(méi)有定義?如果沒(méi)有,那么可能就有出現(xiàn)跨瀏覽器bug的風(fēng)險(xiǎn)。當(dāng)然,這樣的組合并不是不可以,但你要想清楚為什么要這樣做,以及做好足夠的跨瀏覽器測(cè)試。

Internet Explorer

當(dāng)你解決了在“好的”瀏覽器上出現(xiàn)的問(wèn)題后,現(xiàn)在應(yīng)開(kāi)始著手IE平臺(tái)。我的建議是從你希望支持的最老版本的IE開(kāi)始,因?yàn)楹芏嗬习姹綢E上的問(wèn)題在新版本中延續(xù)出現(xiàn)。就算對(duì)于IE,你也應(yīng)該嘗試找出問(wèn)題而不是依賴于使用hack方法。盲目使用*和_的hack方法就像在一個(gè)返回錯(cuò)誤值的函數(shù)中加入修正量(如下),而不是找出其中的算法性錯(cuò)誤。

return result + 4;

當(dāng)然,有時(shí)候在IE6和IE7里面使用hack是必要的。對(duì)于IE8,通常只在需要兼容CSS3的地方使用hack。通常情況下,在IE6/7里需要使用hack的地方有:

hasLayout問(wèn)題,使用zoom:1

相對(duì)定位導(dǎo)致元素消失

3px浮動(dòng)BUG

被撐大的容器的浮動(dòng)錯(cuò)誤,可是經(jīng)常被overflow:hidden碰巧的掩飾了。還有一些不太常見(jiàn)的需要使用hack的情況,比如當(dāng)兩個(gè)浮動(dòng)元素中間有comment代碼時(shí)將會(huì)觸發(fā)重復(fù)內(nèi)容bug。對(duì)于只在IE中出現(xiàn)的css問(wèn)題,我的建議是仔細(xì)描述你所看見(jiàn)的,并在google中搜索相應(yīng)的解決方法。在你找到bug原因前,不要盲目使用hack掩飾它。IE自帶的調(diào)試工具很糟糕,所以可能你需要給元素增加背景色來(lái)方便你查看頁(yè)面上真實(shí)的排版。

實(shí)現(xiàn)解決方案

當(dāng)你找到bug的原因并且知道解決方法后,你同時(shí)也應(yīng)該知道如何在修改代碼時(shí)不破壞已有的正常效果的代碼。下面是我的建議:

1. 依賴樣式級(jí)聯(lián)
2. 使用針對(duì)特定瀏覽器的前綴
3. 使用針對(duì)IE6/7的*和_
4. 不要使用針對(duì)IE8的\9
5. 知道什么時(shí)候該放棄針對(duì)IE的hack
6. 不要對(duì)最新版本的Firefox,Chrome,Safari使用任何hack

1. 依賴樣式級(jí)聯(lián)

首先,在任何可能的情況下都盡量依靠樣式級(jí)聯(lián)。瀏覽器總是采取他們能夠讀懂的最后聲明的樣式。所以,你應(yīng)該從針對(duì)老版本瀏覽器的樣式開(kāi)始書寫,這樣個(gè)瀏覽器就能讀懂和使用它能讀懂的最后的樣式。例如:

.foo{
background-color: #ccc; /* older browsers will use this */
background-color: rgba(0,0,0,0.2); /* browsers that understand rgba will use this */
}

2. 使用針對(duì)特定瀏覽器的前綴

使用針對(duì)特定瀏覽器的前綴,尤其對(duì)于還未被廣泛采用的屬性適用。例如:

.foo{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
}

注意,這套代碼里有兩個(gè)針對(duì)不同版本webkit的語(yǔ)法。前綴代碼的順序同樣應(yīng)該從針對(duì)老版本瀏覽器開(kāi)始書寫(參照第一條)。
如果有一個(gè)W3C標(biāo)準(zhǔn)定義的語(yǔ)法,你應(yīng)該把它放在最后(例如上述代碼最后一行)。這樣隨著瀏覽器開(kāi)始支持這些新特性的標(biāo)準(zhǔn)語(yǔ)法,你的代碼也能夠穩(wěn)健表現(xiàn)。

3. 使用針對(duì)IE6/7的*和_

對(duì)于舊版本IE特有的bug,使用*和_來(lái)彌補(bǔ)。比如:

.clearfix {
overflow: hidden; /* new formatting context in better browsers */
*overflow: visible; /* protect IE7 and older from the overflow property */
*zoom: 1; /* give IE hasLayout, a new formatting context equivalent */
}

所有的IE hack都針對(duì)于某版本和其之前的所有瀏覽器,比如:

_ 針對(duì)IE6和更早版本
* 針對(duì)IE7和更早版本
\9 針對(duì)IE8和更早版本 (注意,IE9在某些CSS屬性上同樣對(duì)于這個(gè)hack敏感),所以,hack代碼的順序同樣也應(yīng)該從針對(duì)老版本瀏覽器開(kāi)始書寫(參照第一條)。

4. 不要使用針對(duì)IE8的\9

我從來(lái)不會(huì)使用\9來(lái)解決IE8里面出現(xiàn)的樣式bug。我只會(huì)在彌補(bǔ)瀏覽器支持性上使用\9來(lái)做“降級(jí)”處理。比如我使用了box-shadow(在更先進(jìn)的瀏覽器上正常),可是在IE8下很難看,因此我使用了\9來(lái)增加了一個(gè)新border。這種情況不能依靠樣式級(jí)聯(lián)(參照第一條)來(lái)處理,因?yàn)檫@是增加一個(gè)新樣式,而不是修改一個(gè)已有的樣式。

5. 知道什么時(shí)候該放棄針對(duì)IE的hack

不要試追求在IE中得到一模一樣的效果。你是否愿意浪費(fèi)額外的HTTP請(qǐng)求,繁雜的HTML/JS/CSS代碼段為了實(shí)現(xiàn)在IE6-8中同樣看到圓角框效果?對(duì)于我個(gè)人來(lái)說(shuō),我的答案是“不會(huì)”。你應(yīng)該知道什么時(shí)候放棄針對(duì)某功能的hack。例如,不要使用filter去模擬CSS3里的漸變效果,那樣會(huì)導(dǎo)致性能問(wèn)題和排版bug。最簡(jiǎn)單的辦法是,壓根不要寄希望你的網(wǎng)頁(yè)在所有瀏覽器中都表現(xiàn)得一模一樣。對(duì)于IE 6-8的用戶,最好的辦法就是給他們一個(gè)簡(jiǎn)單化的用戶體驗(yàn)(注意,是簡(jiǎn)單化而不是殘缺)。

下述糟糕的代碼就是使用filter去模擬CSS3里的gradient:

.foo {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

6. 不要對(duì)最新版本的Firefox,Chrome,Safari使用任何hack

對(duì)于Firefox,Chrome,Safari上的樣式bug,最好的辦法是仔細(xì)檢查,很有可能這是因?yàn)槟愕拇a違背了CSS的規(guī)則。

    相關(guān)評(píng)論

    閱讀本文后您有什么感想? 已有人給出評(píng)價(jià)!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過(guò)難過(guò)
    • 5 囧
    • 3 圍觀圍觀
    • 2 無(wú)聊無(wú)聊

    熱門評(píng)論

    最新評(píng)論

    發(fā)表評(píng)論 查看所有評(píng)論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評(píng)論需要經(jīng)過(guò)審核才能顯示)
    推薦文章

    沒(méi)有數(shù)據(jù)