1。アウトライン 上記のスタイル(rect後の括弧内のプロパティはコンマで分離されていません)は、ほとんどのブラウザーで実行できますが、ステートメントはコンマで区切られていないため、CSS検証に合格することはできません。
CSSの問題をデバッグするとき、指定された要素に境界線を追加して、要素に何が起こるかを正確に確認し、問題の原因を決定するのに役立ちます。これは、レイアウトのより具体的な可視性を提供するため、多くの場合効果的です。しかし、それがブロックレベルの要素である場合、これはいくつかのエラーを引き起こす可能性があります - 任意のブロックレベルの要素に1pxの境界を追加すると、レイアウトに影響を与える可能性が最も高く、この要素の幅に2pxを追加します。
アウトラインプロパティは、ドキュメントフローに影響を与えることなくオブジェクトをレンダリングするため、完璧な代替品です。ただし、IE6とIE7はアウトライン属性をサポートしていないため、両方のブラウザーでのデバッグに使用することはできません。
2。継承(値)
CSS開発には多くの例があります。特定のスタイルを特定の要素に設定することにより、親要素のすべての追加プロパティを「継承」するため、キーボード入力をかなり避けることができます。
これは、継承を設定することで簡単に実現できます。これは便利です。たとえば、バックグラウンド属性を書き換えるとき、多くの場合、属性に多くのテキストがあります(色、URLアドレス、場所など)。したがって、これらの値を書き換える代わりに、プロセス内の要素は親要素と同じバックグラウンドプロパティを持っていることを考慮するだけかもしれません。継承値はすべてを行うことができます。
残念ながら、継承値はIE6およびIE7ではサポートされていません(方向(テキストの方向)および可視性特性を除く)。
3。空細胞
このプロパティは、テーブルまたは「表示」プロパティが「テーブルセル」に設定されている要素にのみ使用されます。テーブルにコンテンツを動的に追加すると、セルの空のコンテンツに遭遇し、空のセルが隠されたくない場合があります。
「空細胞:非表示」を使用すると、この問題を解決することができ、発生する可能性のあるセルを完全に非表示にします。
Internet Explorerは、空セル属性をサポートしていません。
4。キャプション側
テーブル属性といえば、この属性は、テーブルのサイドバーに表示されるテーブルタイトルを宣言するために使用されます。上、下、左、右の4つの値を受け入れます。 Internet Exporerはこのプロパティをサポートしておらず、テーブルのタイトルは常にIE6およびIE7のテーブルの上部に表示されます。
5。カウンターインクリメント /カウンターレセット
注文リスト(<ol>)は、インクリメンタル数を手動で追加する手間を節約し、数字を変更せずにリストのシーケンスを変更できるため、非常に便利です。
CSSには、順序付けられたリストの効果と同様に、カウンターインクリメントおよびカウンターレセットプロパティがあります。これにより、ほぼすべてのHTML要素に増分数を自動的に生成できます。
しかし、IE6、IE7、さらにはSafari(バージョン3.xまで)はこれらのプロパティをサポートしていません。もちろん、IE6はサポートしていません:擬似要素の前。
6。最小
ウェブサイトの設計またはレイアウトには、固定された高さのコンテンツ領域が必要な場合があります。そうしないと、特定の視覚効果が失われます。これは、グラデーションの背景、ユニークなドロップダウンリストによるものである可能性があります。また、PSからのクールなグロー効果によるものである可能性があります。しかし、時にはページには多くのコンテンツがありますが、予想どおりページを展開することはできません。
現時点では、Min-Height属性を使用する必要があります。これは、コンテンツの実際の高さがこの最小高さに達するかどうかにかかわらず、ブラウザが特定のブロックレベルの要素で最小高さをレンダリングするように指示できるためです。次に、コンテンツが最小高さを超えると、要素が適度に拡張されます。
Min-Heightで注意すべき唯一のことは、IE6ではサポートされていないことです。私たちは皆、IE6が歴史の段階(ゆっくり)を終了していることを知っていますが、一部の顧客は、このいまいましいブラウザをサポートするようにウェブサイトに依頼する場合があります。
しかし、IE6が他のブラウザが「Min-Height」をレンダリングするのと同じように高さの値をレンダリングすることは素晴らしいことです。そのため、IE6がその要素に特定のスタイルシートを追加するためにハッキングまたは独立したスタイルシートのみが必要です。
IE6はまた、最小幅、最大高さ、および最大幅を無視しますが、上記の方法もこれらのプロパティで実行可能です。
7。:ホバー
技術的には、ホバーは単なる擬似クラスですが、IE6ではサポートされていません(IE7およびIE8でサポート)。 The:Hover Pseudo-Classを使用すると、マウススタイルを要素に追加できます。これは非常に便利であり、JavaScriptを使用して(少なくともある程度)避けることができます。
ただし、特にIE6が電力に満ちている中国では、WebサイトがIE6を完全にサポートする必要がある場合は、関連するタグに<a>タグなどの「HREF」属性がない限り、この擬似クラスの使用をキャンセルすることを検討する必要があります。 。また、この効果を達成する場合は、JavaScriptと追加のスタイルを使用する必要がある場合があります。
8。表示
ディスプレイは通常、これらの3つの値のいずれかに設定されています:ブロック、インライン、およびなし。 「IEのおかげで、他のディスプレイの値が使用されません。これらの値には、インラインブロック、テーブル、インラインテーブル、およびテーブルセルが含まれます。
したがって、IEはディスプレイのこれらの3つの基本的なプロパティをサポートしていますが、基本的に他のプロパティをサポートしていません。
実際、IE8のディスプレイのプロパティサポートは非常に完全です。ただし、インラインブロック属性の場合、IE6/7はインライン自体の要素のみをサポートします。
さまざまなブラウザでのDisplayのサポートの詳細については、これを参照してください-Shenfeiメモ
9。クリップ
これは、特別な場合に役立つ興味深いCSS属性です。予測不可能で動的に生成されたコンテンツと組み合わせることができます。簡単に言えば、このプロパティを使用すると、特定の要素に隠された領域を指定できます。絶対に配置された要素でも理解できます。要素の表示領域は特定の設定に従ってカットされ、その領域を超えるコンテンツは隠されている。
技術的に言えば、クリップ属性はIEでサポートされていますが、コンマのない構文のみをサポートしています。
div.clipped {
パディング:20px;
幅:400px;
高さ:400px;
クリップ:rect(20px 300px 200px 100px);
位置:絶対;
}
10。:フォーカス
これは、すべての非IEブラウザがこのプロパティをサポートしているため、ここで言及する必要があるもう1つの擬似クラスです。 The:Focus Pseudo-Classを使用すると、ページ要素がキーボード(マウス)のフォーカスになると、スタイルが要素に動的に適用されます。これは、フォーム要素で非常に便利です。これは、選択されたときに入力ボックスに境界線を追加できるためです。