關於css中出現的bug以及修複方法

與許多程式設計語言相比，css是一種相當容易學習的語言。它的文法簡單明了，而且由於它的表現本質，開發人員並不需要處理複雜的邏輯。但是，當在不同的瀏覽器中測試代碼時，困難就會隨之出現。瀏覽器bug何不一至的顯示方式是大多css開發人員面臨的主要難題。你的設計在一種瀏覽器上顯示的很好，但在另一種瀏覽器上布局可能就會支離破碎。

“css難以掌控”的誤解並不來源於語言本身，而是由於為了讓網站在所有主流瀏覽器上工作正常而採取一系列必要的措施。下面我們就來講解一下bug的一些情況。

一、如何捕捉bug

我們都知道瀏覽器是有bug的，而且一些瀏覽器的bug比其他瀏覽器多。當css開發人員在自己代碼中遇到了難題時，一些人就會把錯誤歸咎於瀏覽器的bug，採取適當的招數。其實，大家把bug太誇大了，bug並沒有人們說的那麼常見。最常見的css問題並非來源於瀏覽器bug，而是對css規範的理解不完整。

許多開發人員是自學的，他們自行建立對效果的思維模型。當某些東西不符合他們的預期時就會把瀏覽器的當成罪魁禍首。為了避免這個問題，在處理css bug時最好假設自己是不是哪裡寫錯了，帶著對自己的懷疑來檢查代碼，每個代碼推敲一下，這樣的話在找出自己語法錯誤的時候自然就能不斷提高了。當實在找不到時，再來考慮是不是瀏覽器bug的問題。

常見的css問題

最簡單的一些css問題是由代碼中的打字和語法錯誤造成的。防止這種bug的最好方法一是通過css檢查器運行代碼(ttp://jigsaw.w3.org/css-validator/)。這應該會發現所有語法錯誤，並且向你顯示所在的行和對每個錯誤的簡短描述。

但是也要記住，檢查器只是一個自動檢查的工具，並不是完全可靠。它有可能會報出讓你目瞪口呆的錯誤，這也是檢查器的bug，但是你應該能夠分清楚他報出的是不是真錯誤。

1.特殊性和分類次序的問題

除了語法錯誤之外，比較常見的問題之一設計特殊性和分類次序。在將一個規則應用於元素時，卻發現沒有任何效果，這是往往存在特殊性問題。可以應用其他規則而且它們工作正常，但是某些規則就是不起作用，很是氣人。打個比方：

我想要如下代碼顯示橙色的，但是它原來寫的是透明的，這樣運用規則：

#content p
{
background-color:transparent;
}

.intro
{
background-color:#feeca9
}

覽器中測試的時候，這裡仍然顯示透明。這是因為於選擇content p比intor的選取器的特殊性更強，在這種情況下，最好的處理方式是在intor段落選取器的開頭新增內容元素的id：

#content p
{
background-color: transparent;
}

#content .intro
{
background-color: #feeca9;
}
先寫到這裡，要出去一下。

上一章已經講完了“特殊性和分類次序的問題”，金額下來我們開始講

2.空白邊疊加的問題

空白邊疊加是另一個如果誤解就會導致很多麻煩的css特殊性。下面我們來舉個例子：

<div id="box">
<p>This paragraph has a 20px margin.</p>
</div>

div框設定了10像素的空白邊

#box{
margin:10px;
background-color:#d5d5d5;
}

p
{
margin:20px;
background-color:#6699ff;
}
這樣你理想中的應該是div外邊距是10像素和p標籤產生20像素的外邊距，其實際上是，只有div的10像素外邊距產生了，p標籤只出現了左側和右側有了20像素的外邊距，與div的頂部和底部並沒有產生外邊距。

這是兩個原因造成的，首先，段落的20像素的頂部空白邊和底部空白邊與div的10像素重疊了，形成了一個單一的20像素垂直空白。其次，這些空白邊不是被div包圍，而是突出到div的頂部和底部的外邊。出現這種情況是由於子項目的元素計算其高度造成的。如果元素沒有垂直邊框或者填充，那麼它的高度就是它包含的子項目的頂部和底部邊框邊緣之間的距離。因此，包含的子項目的頂部和底部空白邊就突出到容器元素的外邊。但是，有一個簡單的解決方案。通過添加一個垂直邊框或填充，空白邊就不再疊加了，而且元素的高度就是它包含的子項目的頂部和底部空白邊邊緣之間的距離。代碼如下：

#box{
margin:10px;
padding:1px;
background-color:#d5d5d5;
}

p
{
margin:20px;
background-color:#6699ff;
}
ok問題解決了，下一章我來講bug捕捉的基本知識。

二、bug的隔離問題

接下來需要嘗試隔離問題。通過隔離問題和識別癥狀，有可能查明是什麼導致了這個問題並修複它。隔離問題的一種方法是在相關的元素上應用邊框或輪廓，看看它們的反應：

1 #promo1
2 {
3 float:left;
4 margin-right:5px;
5 border:1px solid red;
6 }
7 #promo2
8 {
9 float:left;
10 border:1px solid green;
11 }
（我一般喜歡把邊框直接在也頁面添中加，這樣善後處理的話就比較好處理）可以使用firefox開發人員工具條外掛程式中的輪廓選項，或者使用用來給不同元素加輪廓的bookmarklet之一。有時候，僅僅添加邊框就會修複問題，這往往就說明這個就是空白邊疊加的問題。

嘗試修改幾個屬性後，看看它們是否影響bug，如果有影響，那麼是哪一個元素，那一個樣式產生的影響找到這個元素，就ok了。例如，如果在兩個架構之間的間隙在IE中比你想想的大，那麼加大空白邊，來測試，看一下會有什麼變化。如果邊框之間的間隙加倍了，那麼可能是遇到了IE的雙空白邊浮動bug。

1 #promo1
2 {
3 float:left;
4 margin-right:40px;
5 border:1px solid red;
6 }
7 #promo2
8 {
9 float:left;
10 border:1px solid green;
11 }
嘗試一些常見的解決方案。例如，將position屬性設定為relatively、將display屬性設定為inline（在浮動元素上）或者設定寬度或者高度的屬性，讓它增高或者縮短，都可以修複許多IE bug。這樣的話你就可以找到很多css問題，從而達到對其瞭解和修複它們！

