CSSのバグとその修正方法について

与许多编程语言相比，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特殊性。下面我们来举个例子：

This paragraph has a 20px margin.

div ボックスには 10 ピクセルのマージンが設定されています

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

p
{
margin:20px;
background-color:#6699ff;
}
このように、div の外側マージンが 10 ピクセルで、p タグが 20 ピクセルの外側マージンを生成するのが理想的ですが、実際には div の 10 ピクセルの外側マージンのみが生成され、p タグのみが表示されます。 div の左右には 20 ピクセルの余白があり、上下には余白がありません。

これは 2 つの理由によって発生します。まず、段落の上下の 20 ピクセルのマージンが div の 10 ピクセルと重なり、単一の 20 ピクセルの垂直マージンが形成されます。第 2 に、これらの空白の端は div に囲まれておらず、div の上端と下端を越えてはみ出しています。これは、子要素の高さが要素によって計算されるために発生します。要素に垂直境界線またはパディングがない場合、その高さは、その要素を含む子要素の上端と下端の間の距離になります。したがって、それを含む子要素の上下の余白がコンテナ要素の外側にはみ出します。ただし、簡単な解決策があります。垂直方向の境界線またはパディングを追加すると、空白は重なりなくなり、要素の高さは、その要素を含む子の空白の上端と下端の間の距離になります。コードは次のとおりです:

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

p
{
margin:20px;
background-color:#6699ff;
}
ok これで問題は解決しました。次の章では、虫取りの基礎知識について説明します。 G u b b b

次回は、孤立の問題を試してみる必要があります。問題を切り分けて症状を特定することで、問題の原因を突き止めて修正することができます。問題を切り分ける 1 つの方法は、関連する要素に境界線またはアウトラインを適用して、それらがどのように反応するかを確認することです:

1 #promo1
2 {
3 float:left;
4 margin-right:5px;
5 border:1pxソリッドレッド;
6 }
7 #promo2
8 {
9 float:left;

10 border:1px ソリッドグリーン;

11 }

(私は通常、ページにボーダーを直接追加することを好みます。簡単に扱える (扱いやすい) Firefox 開発者ツールバー プラグインのアウトライン オプションを使用するか、さまざまな要素のアウトラインを示すために使用されるブックマークレットの 1 つを使用できます。場合によっては、境界線を追加するだけで問題が解決する場合がありますが、これは多くの場合、問題が空白のオーバーレイにあることを示しています。个 いくつかの属性を変更してみた後、それらが BUG に影響するかどうか、影響がある場合はどの要素、そのスタイルの影響があればこの要素が OK であるかを確認します。たとえば、2 つのフレーム間のギャップが IE で考えているよりも大きい場合は、マージンを増やしてテストして、何が起こるかを確認します。境界線間の間隔が 2 倍になる場合は、IE の二重マージン フローティング バグに遭遇している可能性があります。

1 #promo1
2 {
3 float:left;
4 margin-right:40px;
5 border:1px 赤一色;
6 }
7 #promo2
8 {
9 float:left;
10 border: 1px 緑一色;
11 }

いくつかの一般的な解決策を試してください。たとえば、position プロパティを相対に設定したり、display プロパティをインライン (浮動要素上) に設定したり、幅や高さのプロパティを設定して高さを高くしたり低くしたりすると、IE の多くのバグを修正できます。こうすることで、CSS の問題をたくさん見つけることができるので、問題を理解して修正することができます。

🎜