まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツールのためです。 Chrome でのデバッグが完了したら、Safari または Firefox でのデバッグに移ります。 これらの「適切な」ブラウザで期待どおりの結果が得られない場合は、コード自体が CSS ルールに違反している可能性があります。これらの「優れた」ブラウザで発生する問題を回避しようとするのではなく、問題の原因を特定するようにしてください。私は通常、次のようなバグの原因となる可能性のある箇所をチェックします。
次にテキストが続きます 覚えておくべき最も重要なことは、W3C 標準ではエラーの動作が定義されていないということです。したがって、仕様に従わないと、ブラウザ間で異なる効果が生じる可能性があります。また、「奇妙な」プロパティ (マージンやインライン要素など) を組み合わせると、ブラウザ間でバグが発生する可能性もあります。 画面 CSS を書くことは旅を選択することだと私は考えています。いくつかの決定を行う必要があります。たとえば、まず、ブロック、インライン、インライン ブロック、テーブルなど、さまざまな表示モードで使用する要素を選択する必要があります。選択が完了したら、いくつかの特定の方法を使用して実際の表示を変更できます。 ブロック要素では、マージン、パディング、高さ、幅を使用する必要があります。ただし、line-height は適用されません。 インライン要素では、行の高さ、垂直方向の配置、間隔を使用する必要があります。ただし、マージン、パディング、高さ、幅は適用されません。 まず、テーブルには垂直方向と水平方向の配置があります。第二に、表内の要素を 1 つでも見逃すと、表全体がおかしく見えることがあります。最後に、マージンは表の行と列には適用されず、パディングは表や表の行には適用されません。 ポジショニング ブロックレベル要素を使用する場合は、次に配置方法を選択する必要があります。
ここでは、すべての表示と位置の組み合わせをリストしません。要約すると、注意すべき点が 2 つあります。
たとえば、フロート、テーブルセル、インライン要素を組み合わせるのは適切でしょうか?ブラウザはレンダリングをどのように解釈するのでしょうか? W3C 標準には定義がありますか?そうでない場合、クロスブラウザバグが発生するリスクがあります。もちろん、このような組み合わせは不可能ではありませんが、なぜそうするのかについて明確に考え、十分なクロスブラウザテストを行う必要があります。 インターネットエクスプローラー 「優れた」ブラウザの問題を解決したら、次は IE プラットフォームに移行します。私のアドバイスとしては、サポートしたい IE の最も古いバージョンから始めることです。古いバージョンの IE の問題の多くは、新しいバージョンにも引き継がれるからです。 IE の場合でも、ハックに頼るのではなく、問題を切り分けるようにしてください。 * と _ のハックを盲目的に使用することは、アルゴリズムのエラーを識別するのではなく、誤った値を返す関数に修正 (以下を参照) を追加するようなものです。 コードをコピー コードは次のとおりです。結果 + 4 を返します。 もちろん、IE6 や IE7 でハックを使用する必要がある場合もあります。 IE8 の場合、ハックは通常、CSS3 互換性が必要な場合にのみ使用されます。通常、IE6/7 でハックが必要となる場所は次のとおりです。
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 つの構文があることに注意してください。プレフィックス コードの順序も、ブラウザーの古いバージョンから順に記述する必要があります (最初のものを参照)。 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のクラスロードメカニズムのプロセスとソースコード分析
実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...
私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...
この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...
ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...
目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...
500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...
目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...
チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...
コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...
コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...
1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...