關於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框設定了10像素的空白邊

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

p
{
margin;
}
這樣你理想中的應該是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;問題解決了，下一章來講bug捕捉的基本知識。

 

二、bug的隔離問題

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

 1 #promo1

 2 {

 3 float:left;

 4 margin-right:5px;

 5 b: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 

 9  float:left;
10  border: 1px solid green;
11  }
       嘗試一些常見的解決方案。例如，將position屬性設為relatively、將display屬性設為inline（在浮動元素上）或設定寬度或高度的屬性，讓它增高或縮短，都可以修復許多IE bug。這樣的話你就可以找到很多css問題，從而達到對其了解和修復它們！