調(diào)試CSS跨瀏覽器樣式出現(xiàn)bug怎么辦

這篇文章主要為大家展示了“調(diào)試CSS跨瀏覽器樣式出現(xiàn)bug怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“調(diào)試CSS跨瀏覽器樣式出現(xiàn)bug怎么辦”這篇文章吧。

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

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

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

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

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

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

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

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

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

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

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

接下來正文來了

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

Display

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

塊元素應(yīng)該使用margin，padding，height和width。然而line-height不適用。

行內(nèi)元素應(yīng)該使用line-height，vertical align和空格符。然而margin，padding，height和width不適用。

首先，表格有垂直和水平排列方式。其次，如果你遺漏了表格中的某元素，整個表格可能會有詭異的顯示。最后，margin不適用與表格的行和列，padding不適用與表格和表格的行。

Positioning

如果你選擇使用塊級元素，接下來你需要選擇position方式：

• Float – 如果你使用了float，那么這個元素就變成了塊級元素，而之前作用于該元素的vertical-align和line-height屬性都將失效。

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

• Static – 默認(rèn)的position方式。

• Fixed – 元素位置相對于瀏覽器窗口。不常使用的方式。

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

在這里我就不列舉所有的display和position組合了。總之，有兩件事情需要注意：

1. 對于我選擇的display和position方式，其他的屬性（比如margin，line-height）是不是適合？

2. 兄弟節(jié)點(diǎn)的position方式是不是契合？

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

Internet Explorer

當(dāng)你解決了在“好的”瀏覽器上出現(xiàn)的問題后，現(xiàn)在應(yīng)開始著手IE平臺。我的建議是從你希望支持的最老版本的IE開始，因?yàn)楹芏嗬习姹綢E上的問題在新版本中延續(xù)出現(xiàn)。

就算對于IE，你也應(yīng)該嘗試找出問題而不是依賴于使用hack方法。盲目使用*和_的hack方法就像在一個返回錯誤值的函數(shù)中加入修正量（如下），而不是找出其中的算法性錯誤。

代碼如下:

return result + 4;

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

• hasLayout問題，使用zoom:1

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

• 3px浮動BUG

• 被撐大的容器的浮動錯誤，可是經(jīng)常被overflow:hidden碰巧的掩飾了。

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

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

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

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

2. 使用針對特定瀏覽器的前綴

3. 使用針對IE6/7的*和_

4. 不要使用針對IE8的\9

5. 知道什么時候該放棄針對IE的hack

6. 不要對最新版本的Firefox，Chrome，Safari使用任何hack

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

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

代碼如下:

.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. 使用針對特定瀏覽器的前綴

使用針對特定瀏覽器的前綴，尤其對于還未被廣泛采用的屬性適用。例如：

代碼如下:

.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 */
}

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

3. 使用針對IE6/7的*和_

對于舊版本IE特有的bug，使用*和_來彌補(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都針對于某版本和其之前的所有瀏覽器，比如：

_ 針對IE6和更早版本

* 針對IE7和更早版本

\9 針對IE8和更早版本 （注意，IE9在某些CSS屬性上同樣對于這個hack敏感）

所以，hack代碼的順序同樣也應(yīng)該從針對老版本瀏覽器開始書寫（參照第一條）。

4. 不要使用針對IE8的\9

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

5. 知道什么時候該放棄針對IE的hack

不要試追求在IE中得到一模一樣的效果。你是否愿意浪費(fèi)額外的HTTP請求，繁雜的HTML/JS/CSS代碼段為了實(shí)現(xiàn)在IE6-8中同樣看到圓角框效果？對于我個人來說，我的答案是“不會”。

你應(yīng)該知道什么時候放棄針對某功能的hack。例如，不要使用filter去模擬CSS3里的漸變效果，那樣會導(dǎo)致性能問題和排版bug。最簡單的 辦法是，壓根不要寄希望你的網(wǎng)頁在所有瀏覽器中都表現(xiàn)得一模一樣。對于IE 6-8的用戶，最好的辦法就是給他們一個簡單化的用戶體驗(yàn)（注意，是簡單化而不是殘缺）。

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

代碼如下:

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

6. 不要對最新版本的Firefox，Chrome，Safari使用任何hack

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

以上是“調(diào)試CSS跨瀏覽器樣式出現(xiàn)bug怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！