CSS クロスブラウザ スタイルのバグのデバッグについて

CSS クロスブラウザ スタイルのバグのデバッグについて

まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツールのためです。 Chrome でのデバッグが完了したら、Safari または Firefox でのデバッグに移ります。

これらの「適切な」ブラウザで期待どおりの結果が得られない場合は、コード自体が CSS ルールに違反している可能性があります。これらの「優れた」ブラウザで発生する問題を回避しようとするのではなく、問題の原因を特定するようにしてください。私は通常、次のようなバグの原因となる可能性のある箇所をチェックします。

  • HTML コードの説明 – タグを閉じるのを忘れていませんか? ブロック要素をインライン要素で囲みますか? 標準に違反するコードは、ブラウザによって解釈およびレンダリングが異なる場合があります。
  • CSS lint ツールを使用して CSS コードを確認します。検出されたエラーに注意してください。ほとんどの場合、警告よりもエラーの方がブラウザ間での違いを引き起こす可能性が高くなります。
  • スタイルシートをリセットする代わりに、(別の) ブラウザのデフォルトの CSS スタイルに依存します。
  • ブラウザのサポートの違い。高度な CSS3 プロパティまたは HTML5 要素を使用していますか?ブラウザのサポートドキュメントをチェックして、すべての視聴者のブラウザがカバーされていることを確認してください。古いブラウザをサポートするには、「機能フォールバック」を設計する必要があります。たとえば、影の境界線を境界線にダウングレードしたり、丸い角を四角形にダウングレードしたりします。
  • スペースがあってはならない場所にスペースを追加すると、余白が奇妙に見えることがあります。
  • 絶対位置が使用されますが、垂直オフセットと水平オフセットは設定されません。この場合、絶対位置に配置された要素は、position: static と同じ位置にレンダリングされます。ただし、上、右、下、または左の値を変更しようとすると、要素は、最も近い相対位置にある親を基準とした位置にすぐに「ジャンプ」します。
  • 異なる表示モードの要素が「珍しい」方法で組み合わされています。たとえば、W3C 標準では、テーブル セルがフローティング要素の隣にある場合に、そのテーブル セルをどのようにレイアウトするかについては規定されていません。そのため、このように記述されたコードは間違っているわけではありませんが、ブラウザ間でレンダリング効果が異なるバグが発生する可能性があります。
  • スペースがレイアウトに影響するかどうか。タイポグラフィが空白スペースに依存しないようにする必要があります。
  • 小数ピクセル値はブラウザ間で異なる効果を引き起こす可能性があります。

次にテキストが続きます

覚えておくべき最も重要なことは、W3C 標準ではエラーの動作が定義されていないということです。したがって、仕様に従わないと、ブラウザ間で異なる効果が生じる可能性があります。また、「奇妙な」プロパティ (マージンやインライン要素など) を組み合わせると、ブラウザ間でバグが発生する可能性もあります。

画面

CSS を書くことは旅を選択することだと私は考えています。いくつかの決定を行う必要があります。たとえば、まず、ブロック、インライン、インライン ブロック、テーブルなど、さまざまな表示モードで使用する要素を選択する必要があります。選択が完了したら、いくつかの特定の方法を使用して実際の表示を変更できます。

ブロック要素では、マージン、パディング、高さ、幅を使用する必要があります。ただし、line-height は適用されません。

インライン要素では、行の高さ、垂直方向の配置、間隔を使用する必要があります。ただし、マージン、パディング、高さ、幅は適用されません。

まず、テーブルには垂直方向と水平方向の配置があります。第二に、表内の要素を 1 つでも見逃すと、表全体がおかしく見えることがあります。最後に、マージンは表の行と列には適用されず、パディングは表や表の行には適用されません。

ポジショニング

ブロックレベル要素を使用する場合は、次に配置方法を選択する必要があります。

  • フロート – フロートを使用すると、要素はブロックレベル要素になり、要素に以前適用された vertical-align プロパティと line-height プロパティは無効になります。
  • 絶対 – オフセットは、最も近い相対位置にある親ノードを基準に計算されます。絶対位置に配置された要素は、親ノードと兄弟ノードが変更されてもリフローを引き起こしません。この機能はアニメーション効果を作成するのに役立ちます。ただし、絶対配置が使用され、コンテンツが動的に変化すると、表示上の問題が発生する可能性があります。典型的な例は、絶対配置された丸いボックスです。
  • 静的 – デフォルトの配置方法。
  • 固定 – 要素の位置はブラウザ ウィンドウを基準とします。あまり使用されません。
  • 相対的 – 通常、この要素のスタイルには影響しません。絶対位置に配置された従属子ノードのみが、このノードに対してオフセットされます。

ここでは、すべての表示と位置の組み合わせをリストしません。要約すると、注意すべき点が 2 つあります。

  1. 他のプロパティ (余白や行の高さなど) は、選択した表示方法や配置方法に適していますか?
  2. 兄弟ノードの配置方法は一貫していますか?

たとえば、フロート、テーブルセル、インライン要素を組み合わせるのは適切でしょうか?ブラウザはレンダリングをどのように解釈するのでしょうか? W3C 標準には定義がありますか?そうでない場合、クロスブラウザバグが発生するリスクがあります。もちろん、このような組み合わせは不可能ではありませんが、なぜそうするのかについて明確に考え、十分なクロスブラウザテストを行う必要があります。

インターネットエクスプローラー

「優れた」ブラウザの問題を解決したら、次は IE プラットフォームに移行します。私のアドバイスとしては、サポートしたい IE の最も古いバージョンから始めることです。古いバージョンの IE の問題の多くは、新しいバージョンにも引き継がれるからです。

IE の場合でも、ハックに頼るのではなく、問題を切り分けるようにしてください。 * と _ のハックを盲目的に使用することは、アルゴリズムのエラーを識別するのではなく、誤った値を返す関数に修正 (以下を参照) を追加するようなものです。


コードをコピー
コードは次のとおりです。

結果 + 4 を返します。

もちろん、IE6 や IE7 でハックを使用する必要がある場合もあります。 IE8 の場合、ハックは通常、CSS3 互換性が必要な場合にのみ使用されます。通常、IE6/7 でハックが必要となる場所は次のとおりです。

  • レイアウトの問題があります。ズーム:1 を使用してください。
  • 相対的な配置により要素が消える
  • 3px フローティングバグ
  • 引き伸ばされたコンテナのフローティング エラーは、多くの場合、overflow:hidden によって誤ってマスクされます。

2 つのフローティング要素の間にコメント コードがある場合など、重複コンテンツのバグを引き起こすような、ハックが必要となるあまり一般的ではない状況もあります。 IE でのみ発生する CSS の問題の場合、表示される内容を注意深く説明し、対応する解決策を Google で検索することをお勧めします。バグの原因が見つかる前に、盲目的にハックを使用してバグを隠さないでください。 IE に組み込まれているデバッグ ツールはひどいので、ページ上の実際のレイアウトを確認しやすくするために、要素に背景色を追加する必要がある場合があります。

ソリューションの実装

バグの原因を見つけて修正方法がわかったら、正常に動作する既存のコードを破壊せずにコードを変更する方法も知っておく必要があります。私の提案は次のとおりです:

1. 依存型カスケーディング

2. ブラウザ固有のプレフィックスを使用する

3. IE6/7の場合は*と_を使用する

4. IE8では\9を使わない

5. IEハックをやめるべきタイミングを知る

6. Firefox、Chrome、Safariの最新バージョンではハックを使用しないでください。

1. 依存型カスケーディング

まず、可能な限りスタイル カスケードを利用するようにしてください。ブラウザは常に、理解できる最後の宣言されたスタイルを採用します。したがって、ブラウザが理解できる最新のスタイルを読み取って使用できるように、古いブラウザ用のスタイルを記述することから始める必要があります。例えば:


コードをコピー
コードは次のとおりです。

.foo{
background-color: #ccc; /* 古いブラウザではこれが使用されます */
background-color: rgba(0,0,0,0.2); /* rgba を理解するブラウザはこれを使用します */
}

2. ブラウザ固有のプレフィックスを使用する

特にまだ広く採用されていないプロパティの場合は、ブラウザ固有のプレフィックスを使用します。例えば:


コードをコピー
コードは次のとおりです。

.foo{
background: #1e5799; /* 古いブラウザ */
背景: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
背景: -webkit-gradient(linear, 左上, 左下, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome、Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* Chrome 10+、Safari 5.1+ */
背景: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* Opera 11.10+ */
背景: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* IE10+ */
背景: linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}

このコードには、WebKit の異なるバージョン用の 2 つの構文があることに注意してください。プレフィックス コードの順序も、ブラウザーの古いバージョンから順に記述する必要があります (最初のものを参照)。
W3C 標準で定義された構文がある場合は、それを最後に置く必要があります (上記のコードの最後の行など)。こうすることで、ブラウザがこれらの新機能の標準構文をサポートし始めても、コードは堅牢になります。

3. IE6/7の場合は*と_を使用する

古いバージョンの IE に固有のバグについては、* と _ を使用して修正してください。例えば:


コードをコピー
コードは次のとおりです。

.clearfix {
overflow: hidden; /* より優れたブラウザでの新しい書式設定コンテキスト */
*overflow: visible; /* IE7 以前をオーバーフロー プロパティから保護します */
*zoom: 1; /* IE に新しい書式設定コンテキストに相当する hasLayout を与える */
}

すべての IE ハックは、次のような特定のバージョンと以前のすべてのブラウザを対象としています。

_ IE6以前の場合

* IE7以前の場合

IE8 およびそれ以前のバージョンでは \9 (IE9 も一部の CSS プロパティでこのハックの影響を受けることに注意してください)

したがって、ハックコードの順序も、古いバージョンのブラウザ用に書くことから始める必要があります(最初の項目を参照)。

4. IE8では\9を使わない

IE8 のスタイル バグを回避するために \9 を使用することは決してありません。ブラウザのサポートを補うための「フォールバック」としてのみ \9 を使用します。たとえば、box-shadow (より高度なブラウザでは問題なく動作します) を使用しましたが、IE8 では見栄えが悪かったため、\9 を使用して新しい境界線を追加しました。この状況は、既存のスタイルを変更するのではなく、新しいスタイルを追加するため、スタイル カスケード (最初の項目を参照) では処理できません。

5. IEハックをやめるべきタイミングを知る

IE でまったく同じ効果を得ようとしないでください。 IE6-8 で同じ丸い角のボックス効果を実現するためだけに、余分な HTTP リクエストと複雑な HTML/JS/CSS コード スニペットを無駄にするつもりですか?私個人としては、答えは「いいえ」です。

機能のためにハックを放棄するタイミングを知っておく必要があります。たとえば、CSS3 でグラデーション効果をシミュレートするためにフィルターを使用しないでください。パフォーマンスの問題や印刷上のバグが発生する可能性があります。最も簡単な方法は、ページがすべてのブラウザでまったく同じように動作することを期待しないことです。 IE 6 ~ 8 のユーザーにとって、最善のアプローチは、簡素化されたユーザー エクスペリエンスを提供することです (簡素化されているのであって、不完全ではないことに注意してください)。

次の不適切なコードでは、フィルターを使用して CSS3 グラデーションをシミュレートしています。


コードをコピー
コードは次のとおりです。

.foo {
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

6. Firefox、Chrome、Safariの最新バージョンではハックを使用しないでください。

Firefox、Chrome、Safari のスタイル バグについては、慎重に確認することが最善策です。これは、コードが CSS のルールに違反していることが原因である可能性が非常に高いです。

<<:  Tomcatのクラスロードメカニズムのプロセスとソースコード分析

>>:  トークン生成と検証を実装するミニプログラム

推薦する

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...

nginx ip ブラックリストの動的禁止の例

ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...

Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析

Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

Nginxサービス500:内部サーバーエラーの原因の1つ

500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...

Reactの原理の説明

目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...

jQuery Ajax チャットボットの実装事例

チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

メッセージボードにメッセージを追加および削除するための JavaScript

この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

Linux で cmake を使用して MySQL をコンパイルおよびインストールするための詳細なチュートリアル

1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...