CSS バグの処理方法の完全なリストと CSS_html/css_WEB-ITnose を使用するための最良の習慣

エフェクトプレビュー クリックしてダウンロード

CSS BUG は dedecms.com で多く紹介されており、CSS レイアウトでは常にこのような問題が発生し、誰もが悩まされてきました。誰もが、IE6 の 3 ピクセル ギャップ (3px バグ)、IE5/6 Doubled Float-Margin バグ (二重マージン バグ) などの一般的な CSS バグの処理に比較的慣れていると思います。しかし、複雑な CSS BUG 問題に遭遇することはよくあります。いわゆる「複雑」とは、本質的にトリガー条件が非常に複雑であることを意味し、「BUG」は必ずしもブラウザの BUG であることを意味するわけではありません。この種の問題の場合、最初に解決する必要があるのは、問題を迅速に特定することによってのみ、問題をより適切に解決することができます。
迅速に位置を特定するため、私の個人的な経験は一般的に次のとおりです（基本的に、私が淘宝網で遭遇した複雑なCSS BUGの問題の90％以上を見つけることができます）：

1. ページのラベルが閉じているかどうかを確認します
しないでください。これを過小評価しないでください。おそらく、2 日間解決できなかった CSS バグの問題は、これに起因しているだけです。結局のところ、ページ テンプレートは通常、開発者によってネストされており、そのような問題が簡単に発生する可能性があります。
簡単なヒント: Dreamweaver を使用してファイルを開いて確認できます。通常、閉じられたタグがない場合、そのタグは黄色の背景で強調表示されます。

2. スタイルの削除方法
一部の複雑なページでは、N 個の外部リンク CSS ファイルをロードし、CSS ファイルを 1 つずつ削除し、BUG によってトリガーされた特定の CSS ファイルを見つけて、ロックの範囲を狭めることがあります。
ロックされたばかりの問題のある CSS スタイル ファイルについて、特定のスタイル定義を 1 行ずつ削除し、特定のトリガー スタイル定義、さらには特定のトリガー スタイル属性を見つけます。

3. モジュールの確認方法
ページの HTML 要素から開始することもできます。ページ内のさまざまな HTML モジュールを削除し、問題の原因となっている HTML モジュールを見つけます。

4. float がクリアされているかどうかを確認します
実際、float がクリアされていないことが原因で発生する CSS のバグの問題は数多くあります。フロートをクリアする良い習慣を身につける必要があります。追加の HTML タグを使用せずにフロートをクリアする方法を使用することをお勧めします (フロートをクリアするために overflow:hidden;zoom:1 などの同様のメソッドを使用するのは制限が厳しすぎるため避けてください)。 ）。

5. IE で haslayout がトリガーされるかどうかを確認します
IE での多くの複雑な CSS バグは、IE の独自の haslayout と密接に関係しています。 haslayout に慣れていて理解していれば、複雑な CSS バグを少ない労力で解決できるようになります。 old9 によって翻訳された「レイアウトを持つことについて」を読むことをお勧めします (素晴らしい GFW を越えられない場合は、青の再投稿を読むことができます)
簡単なヒント: haslayout がトリガーされる場合、IE のデバッグ ツール Internet Explorer のプロパティ開発者ツールバーには、halayout 値が -1 であることが表示されます。

6. 枠線と背景のデバッグ方法
その名の通り、デバッグ用の要素に目立つ枠線や背景（通常は黒か赤）を設定する方法です。この方法は、CSS のバグをデバッグするために最も一般的に使用される方法の 1 つであり、複雑なバグにも引き続き適用できます。手頃な価格で環境に優しいです ^^
最後に皆さんに強調したいのは、良い文章を書く習慣を身につけ、余分なタグを減らし、可能な限りセマンティックにし、標準に準拠することで、実際に非常に複雑な CSS バグの多くを減らすことができるということです。多くの場合、問題を引き起こすのは私たち自身です。皆さんが虫から遠ざかって、より良い生活を送れることを願っています。

ほとんどのテクノロジーには、独自の合意された標準があります。 CSSも例外ではありません。 Web 上に存在するすべての CSS が標準化されているわけではありませんが、既存の標準に従って CSS を使用すると便利です。一般に、開発者はコンテンツを構造からできるだけ分離する必要があります。この利点は次のとおりです:

1: サイトの寿命を延ばします

標準以外のスタイル シートは、その時点では便利かもしれませんが、ブラウザの新しいバージョンがリリースされた後は、互換性の問題が発生する可能性があります。そのとき、サイトをページごとに修正するのは非常に時間がかかる作業になりますし、CSSを使用する意味もなくなってしまいます。

2: すべてのユーザーとブラウザがサイトにアクセスできるようにします。

一部の地方自治体では、ウェブサイトは障害のある人もアクセスできるものでなければならないと法律で定めています。聴覚ブラウザなど、障害を認識するために設計された閲覧デバイスには、非常に厳しい CSS 規範要件があります。

3: サイトの更新とメンテナンスを簡単にします。

CSS を適切に使用すると、1 つのページの調整をすべてのページにすばやく適用できます。

最初に選択しなければならないのは、どのスタイルシートを使用するかです。ベスト プラクティスに関して、さまざまなスタイルシートの内訳を以下に示します。

簡単に言えば、インライン CSS の使用は避ける必要があります。いくつかの欠点の中でも特に、インライン CSS を使用することは、CSS の本当の利点、つまりコンテンツを構造から分離しないことを意味します。 DW MX は、主にページ要素 (DW MX ユーザー インターフェイスでは「レイヤー」と呼ばれます) を配置するため、またはオブジェクトのプロパティを変更するためにインライン スタイルの Javascript を使用する必要がある特定の DHTML 効果を使用するために、インライン CSS を使用します。

埋め込み CSS: 現在のページにのみ影響するため、これも最適とは言えません。更新プロセス中にページが失われると、サイトのスタイルが一貫しなくなります。また、ユーザーがサイトを閲覧するときに、ページごとにスタイル シート情報をダウンロードする必要があります。

外部 CSS: これが最初の選択肢です。外部 CSS を使用すると、接続されているすべてのページが一貫した外観とスタイルを維持でき、アウトラインを一度変更すれば、関連するすべてのページを簡単に更新でき、ページが小さくなり、閲覧が高速になります。