必須了解的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特殊性。下面我們來舉個例子：

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

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

#box{margin:10px;background-color:#d5d5d5;}
p{margin:20px;background-color:#6699ff;}

這樣你理想中的應該是p外邊距是10像素和p標籤產生20像素的外邊距，其實是，只有p的10像素外邊距產生了，p標籤只出現了左側和右側有了20像素的外邊距，與p的頂部和底部並沒有產生外邊距。

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

#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问题，从而达到对其了解和修复它们！

以上是必須了解的css中出現的bug以及修復方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！