知っておくべきCSSのバグとその修正方法

多くのプログラミング言語と比較して、CSS は学習がかなり簡単な言語です。その構文はシンプルかつ明確であり、その表現力豊かな性質により、開発者は複雑なロジックを扱う必要がありません。ただし、さまざまなブラウザーでコードをテストする場合には問題が発生します。ブラウザのバグがさまざまな方法で表示される理由は、ほとんどの CSS 開発者が直面する大きな問題です。あるブラウザではデザインがうまく見えても、別のブラウザではレイアウトが崩れて見える場合があります。

「CSS は制御が難しい」という誤解は、言語自体から来ているのではなく、サイトをすべての主要なブラウザーで適切に動作させるために必要な一連の対策から来ています。以下に、いくつかのバグの状況について説明します。

1. バグを見つける方法

ブラウザにはバグがあり、一部のブラウザには他のブラウザよりも多くのバグがあることは誰もが知っています。 CSS 開発者が自分のコードで問題に遭遇すると、そのエラーをブラウザのバグのせいにして、適切な措置を講じる人もいます。実際、誰もがバグを誇張しており、バグは人々が言うほど一般的ではありません。最も一般的な CSS の問題は、ブラウザのバグによって発生するのではなく、CSS 仕様の不完全な理解によって発生します。

多くの開発者は独学でエフェクトの独自のメンタル モデルを構築しています。何かが期待を満たさない場合、彼らはブラウザが原因であると指摘します。この問題を避けるために、CSS のバグに対処するときは、どこかで間違っていることを想定し、自分自身を疑いながらコードを確認し、コードを 1 つ 1 つ精査すると、自然と発見できるようになります。構文エラーを解決し続けます。本当に見つからない場合は、ブラウザのバグかどうかを検討してください。

一般的な CSS の問題

最も単純な CSS の問題の中には、コード内の入力エラーや構文エラーが原因で発生するものもあります。このバグを防ぐ最善の方法は、CSS バリデータ (ttp://jigsaw.w3.org/css-validator/) を通じてコードを実行することです。これにより、すべての構文エラーが検索され、各エラーの行と簡単な説明が表示されます。

ただし、チェッカーは単なる自動チェック ツールであり、完全に信頼できるわけではないことにも注意してください。びっくりするようなエラーが報告される場合がありますが、これはチェッカーのバグでもありますが、報告されるエラーが本物のエラーであるかどうかはわかるはずです。

1. 特異性と分類順序に関する問題

文法上の誤りに加えて、より一般的な問題の 1 つは、特異性と分類順序の設計です。ルールを要素に適用して効果がないことが判明した場合、多くの場合、特異性の問題が発生します。他のルールを適用することもでき、それらは正常に機能しますが、一部のルールは機能せず、非常に面倒です。例:

次のコードをオレンジ色で表示したいのですが、元々は透明になるように記述されているため、次のルールを使用します:

#content p{background-color:transparent;}
.intro{background-color:#feeca9}

ブラウザでテストすると、依然として透明で表示されます。これは、コンテンツ p の選択が intor のセレクターよりも具体的であるためです。この場合、それに対処する最良の方法は、intor 段落セレクターの先頭にコンテンツ要素の ID を追加することです。

#content p{background-color: transparent;}
#content .intro{background-color: #feeca9;}

最初にここに書いてください。ちょっと出かけたいです。

前章で「特異性と分類順序の問題」についての話は終わりましたので、これから話していきましょう

2. 空白エッジオーバーレイの問題

空白エッジオーバーレイは、特異性を誤解すると大変なことになります。例を見てみましょう:

<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 タグは実際には 10 ピクセルのマージンのみを生成します。 p タグは左右に 20 ピクセルの余白のみが生成され、p の上下には余白が生成されません。

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

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

OK、問題は解決しました。次の章では、バグ捕捉の基本的な知識について説明します。

2. バグ分離の問題

       接下来需要尝试隔离问题。通过隔离问题和识别症状，有可能查明是什么导致了这个问题并修复它。隔离问题的一种方法是在相关的元素上应用边框或轮廓，看看它们的反应：

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のバグとその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。