CSS ハック方法の最も包括的なリスト (複数のブラウザーと互換性があります)

統一されたページ効果を得るには、異なるブラウザまたは異なるバージョンに対応する CSS コードを記述するこのプロセスを CSS ハックと呼びます。 長年フロントエンドに取り組んでいると、ハッキングが必要になることはあまりありませんが、ブラウザー間でパフォーマンスが一貫していないことによく遭遇します。これに基づいて、場合によっては、すべての人が必要とするページのパフォーマンスを達成するために、この不親切な方法を使用することを非常に躊躇します。私個人としては、ハッキングを使用することはお勧めしません。優れたフロントエンドは、より良いユーザー エクスペリエンスを実現するために、できる限りハックを使用せずに要件を実現する必要があります。しかし、現実はあまりにも残酷です。これは個別のケースではありますが、ブラウザ メーカー間の歴史的な問題により、ターゲット要件の下でハッカーと妥協せざるを得ません。今日は、私自身の経験と理解に基づいて、IE6 ～ IE10 およびその他の標準ブラウザーの CSS ハックをまとめたいくつかのデモを作成しました。おそらく、この記事が現時点で最も包括的なハックの概要になるはずです。

CSSハックとは
メーカーの異なるブラウザや特定のブラウザのバージョン（IE6〜IE11、Firefox/Safari/Opera/Chromeなど）により、CSSのサポートと分析が異なります。その結果、ブラウザ環境が異なると、ページのプレゼンテーション効果に一貫性がなくなります。現時点では、統一されたページ効果を得るために、異なるブラウザまたは異なるバージョンに対応する CSS コードを記述するこのプロセスを CSS ハックと呼びます。 CSS ハックの原理

ブラウザやブラウザのバージョンが異なると、CSS のサポートと解析結果が異なるため、CSS の優先順位がブラウザの表示効果に与える影響により、異なる CSS を適用するシナリオに応じて異なるブラウザをターゲットにすることができます。
CSSハックの分類

CSSハックには大きく分けてCSS属性プレフィックス方式、セレクタープレフィックス方式、IEの条件付きコメント方式（IEであればHTMLヘッダ参照）の3つの表現形式があり、実際のプロジェクトではCSSハックが導入されることがほとんどです。 IE ブラウザの異なるバージョン間のパフォーマンスの違いに対処します。 属性プレフィックスメソッド（つまり、クラス内部ハック）：たとえば、IE6はアンダースコア「_」とアスタリスク「*」を認識できます、IE7はアスタリスク「*」を認識できますが、アンダースコア「_」は認識できません、IE6〜IE10はすべて認識します「9」ですが、Firefoxでは上記3つが認識できません。
セレクター プレフィックス メソッド (つまり、セレクター ハック): たとえば、IE6 は *html .class{} を認識でき、IE7 は *+html .class{} または *:first-child+html .class{} を認識できます。
IE 条件付きコメント方法 (HTML 条件付きコメント ハック): すべての IE (注: IE10 以降では条件付きコメントはサポートされなくなりました): 。このタイプのハックは CSS だけでなく、判定ステートメントに記述されたすべてのコードにも影響します。

CSS ハックを記述する順序は、一般的に、幅広い用途と強力な認識機能を備えた CSS を先頭に定義します。


CSSハック方法1：条件付きコメント方法

この方法はIEブラウザ専用のハック方法であり、Microsoftが公式に推奨しているハック方法です。例は次のとおりです
IE でのみ有効


IE6 でのみ有効です


IE6 以降のバージョンでのみ有効です


IE8 でのみ有効ではありません


IE 以外のブラウザでも有効です