1.概要
CSS の問題をデバッグするとき、私は多くの場合、特定の要素に境界線を追加して、その要素に何が起こっているかを正確に確認し、問題の原因を特定するのに役立てます。これは、レイアウトをより具体的に可視化できるため、多くの場合うまくいきます。しかし、それがブロックレベル要素の場合、何か問題が起こる可能性があります。ブロックレベル要素に 1 ピクセルの境界線を追加すると、要素の幅が 2 ピクセル広くなり、レイアウトに影響を与える可能性があります。
アウトライン プロパティは、ドキュメントの流れに影響を与えることなくオブジェクトをレンダリングするため、完全な代替手段となります。ただし、IE6 と IE7 はアウトライン属性をサポートしていないため、これら 2 つのブラウザでのデバッグには使用できません。
2.(値)を継承
CSS 開発では、この例が数多くあります。特定の要素に特定のスタイルを設定して、その要素に親要素の追加プロパティをすべて「継承」するように指示することで、かなりの量のキーボード入力を回避できます。
これは、継承を設定することで簡単に実現できます。これは役に立つかもしれません。たとえば、背景属性をオーバーライドする場合、属性には多くのテキスト (色、画像 URL、場所など) が含まれることがよくあります。したがって、これらの値を書き換えるのではなく、問題の要素にその親と同じ背景プロパティを持たせたいだけかもしれません。継承値を使用すると、明らかにキーボード入力の手間が大幅に節約されます。
残念ながら、IE6 および IE7 では、継承値はサポートされていません (方向 (テキスト方向) と可視性プロパティを除く)。
3. 空のセル
この属性は、「display」属性が「table-cell」に設定されているテーブルまたは要素にのみ使用されます。表にコンテンツを動的に追加する場合、特定のセルのコンテンツが空で、この空のセルの境界線、背景色、背景画像などを非表示にしたくない状況が発生することがあります。
「空のセル: 非表示」を使用すると、この問題が発生する可能性のあるセルを完全に非表示にすることで、この問題を解決できます。
Internet Explorer は空のセル属性をサポートしていません。
4.キャプション側
テーブル属性について説明すると、この属性は、テーブルの横の列に表示されるテーブルのタイトルを宣言するために使用されます。上、下、左、右の 4 つの値を受け入れます。 Internet Exporer はこの属性をサポートしていません。IE6 および IE7 では、テーブル タイトルは常にテーブルの先頭に表示されます。
5. カウンタインクリメント/カウンタリセット
順序付きリスト (<ol>) は、手動で増加する番号を追加する手間を省き、番号を変更せずにリストの順序を変更できるため、非常に便利です。
CSS には counter-increment プロパティと counter-reset プロパティがあり、これを使用すると、順序付きリストと同様に、ほぼすべての HTML 要素に増加する数値を自動的に生成できます。
ただし、IE6、IE7、さらには Safari (バージョン 3.x まで) はこれらのプロパティをサポートしていません。もちろん、IE6 も :before 疑似要素をサポートしません。
6.最小高さ
Web サイトのデザインやレイアウト構造では、高さが固定されたコンテンツ領域が必要になる場合があります。そうしないと、特定の視覚効果が失われます。これは、グラデーション背景、独自のドロップダウン リスト、または Photoshop からのクールなグロー効果が原因である可能性があります。ただし、ページ内に多くのコンテンツがあるにもかかわらず、ページを期待どおりに展開できない場合があります。
現時点では、 min-height 属性を使用する必要があります。これは、コンテンツの実際の高さがこの最小高さに達しているかどうかに関係なく、ブラウザーに特定のブロックレベル要素の最小高さをレンダリングするように指示できるためです。その後、コンテンツが最小高さを超える場合、要素は適切に拡張されます。
min-height の使用に関して注意すべき唯一の点は、min-height は IE6 ではサポートされていないことです。 IE6 が (ゆっくりと) 廃止されつつあることは誰もが知っていますが、一部の顧客は依然として自分のサイトでこのいまいましいブラウザをサポートすることを要求するかもしれません。
良いニュースは、IE6 は他のブラウザが「最小高さ」をレンダリングするのとまったく同じ方法で高さの値をレンダリングするため、必要なのは、特定の高さを追加するための IE6 固有のハックまたはスタンドアロンのスタイルシートだけであり、問題は解決されます。
IE6 は min-width、max-height、max-width も無視しますが、上記の方法はこれらのプロパティに対しても実行可能です。
7. :ホバー
技術的には、:hover は単なる疑似クラスですが、IE6 ではサポートされていません (IE7 と IE8 はサポートしています)。 :hover 疑似クラスを使用すると、任意のマウスオーバー スタイルを要素に追加できます。これは非常に便利で、JavaScript の使用を (少なくともある程度は) 回避できます。
ただし、Web サイトが IE6 を完全にサポートする必要がある場合、特に IE6 が圧倒的に多い中国では、関連するタグに <a> タグなどの「href」属性がない限り、この疑似クラスの使用をキャンセルすることを検討する必要があります。 。この効果を実現したい場合は、JavaScript と追加のスタイルに頼らなければならない場合があります。
8.ディスプレイ
通常、表示は、ブロック、インライン、なしの 3 つの値のいずれかに設定されます。 IE のおかげで、Display の他の値はほとんど使用されません。これらの値には、inline-block、table、inline-table、table-cell などが含まれます。これらの属性は、特殊なレイアウトの問題を解決するのに非常に役立ちます。
したがって、IE は Display のこれら 3 つの基本プロパティをサポートしますが、他のプロパティは基本的にサポートしません。
実際、IE8 の表示属性のサポートは非常に完全です。ただし、inline-block 属性の場合、IE6/7 はそれ自体がインラインである要素のみをサポートします。
さまざまなブラウザでのディスプレイのサポートの詳細については、ここを確認してください - Shenfei Note
9. クリップ
これは、特別な状況で役立つ興味深い CSS プロパティです。動的に生成される予測不可能なコンテンツと組み合わせられる場合があります。簡単に言うと、この属性を使用すると、特定の要素の非表示領域を指定できます。絶対に配置された要素では、要素の表示領域が特定の設定に従って切り取られ、コンテンツが表示されると理解することもできます。この領域を超えると非表示になります。
技術的に言えば、クリップ属性は IE でサポートされていますが、次のようなカンマなしの構文のみをサポートしています。
div.クリップされた {
パディング: 20px;
幅: 400ピクセル;
高さ: 400ピクセル;
クリップ：rect(20px 300px 200px 100px);
位置: 絶対;
上記のスタイル (rect の後の括弧内の属性はカンマで区切られていません) はほとんどのブラウザで実行できますが、ステートメントがカンマで区切られていないため、CSS 検証に合格しない可能性があります
。
10. :フォーカス
これは、IE 以外のすべてのブラウザがこの属性をサポートしているため、ここで説明する必要があるもう 1 つの疑似クラスです。 :focus 疑似クラスを使用すると、ページ要素がキーボード (マウス) フォーカスになったときに動的に適用される特別なスタイルを宣言できます。これは、入力フィールドが選択されているときに境界線を追加できるため、フォーム要素で便利です。