フロントエンド面の質問-cssハック

A、CSSハックのコンセプト

異なるベンダーのブラウザまたは(例えばIE、Firefoxの/サファリ/オペラ/などのブラウザとは別のバージョンにクロム、CSSのサポート、など)、構文解析は、異なるブラウザ環境で矛盾のページを示し、その結果、同じではありません効果を表示します。この時点で、我々は均一な結果ページを取得する必要があり、あなたが必要とする ブラウザの異なるまたは異なるバージョンのための特定のCSSスタイルを記述すること

私たちは、別のブラウザ/バージョンについては、対応するCSSコードを書く異なるプロセスと呼ばれるCSSハック!

二、CSSハック原則

異なるブラウザやCSSのサポートと分析結果のブラウザのバージョンが同じではない、とあるのでCSSの優先順位は、ブラウザ上で効果の影響を実証するために、我々はそれに応じてのためにすることができます異なるブラウザの異なるシナリオのCSSを適用します

三、CSSハック分類

3.1 CSS方式属性プレフィックス(すなわち、内部ハッククラス)

(1)IE6は、アンダースコア「認識_」とアスタリスクを「*

(2)IE7「はアスタリスクを識別することができる*」が、下線を識別することはできません「_

(3)IE6〜IE10は"識別されています\9"

(4)Firefoxは3を認識しません。

3.2セレクタプレフィックス法(即ちセレクタハック)

(1)IE6が認識 *html .class{}

(2)IE7が認識*+html .class{}または*:first-child+html .class{}

3.3 IE条件付きコメントの方法(すなわち、HTML参照ヘッドIEハック場合)

(1)すべてのIE(注:IE10 +条件付きコメントはサポートされなくなりました)を特定することができます <!--[if IE]>IE浏览器显示的内容 <![endif]-->

以下IE6とは識別することができます(2)<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
書き込みの発効のためだけではなく、CSSハックのこのタイプを裁判官内のすべてのコードを文章が有効になります

(3)のほとんどのため、実際のプロジェクトのCSSハックIEブラウザの異なるバージョン間のパフォーマンスの違いを導入。

四、CSSハック書き込み順

一般的に広く応用されている、強力な認識CSSは、以前に定義されました。

五、CSSハックIEの条件付きコメント方法

このアプローチは、独自のハックIEブラウザの方法である、Microsoftが正式にハックを使用する方法をお勧めします。

5.1 IEで有効になります

<!--[if IE]>
    这段文字只在 IE 浏览器显示
<![endif]-->

5.2 IE6で有効になります

<!--[if IE 6]>
    这段文字只在 IE6 浏览器显示
<![endif]-->

IE6での効果に5.3 +

<!--[if gte IE 6]>
    这段文字只在 IE6以上(包括) 浏览器显示
<![endif]-->

5.4は、IE8で有効になりません。

<!--[if ! IE 8]>
    这段文字只在 非IE8 浏览器显示
<![endif]-->

力に5.5 IE以外のブラウザ

<!--[if ! IE]>
    这段文字只在 非IE 浏览器显示
<![endif]-->

六、CSSハッククラス属性は、内部の法律を前に付けます

財産法は、CSSスタイルプロパティ名の前にいくつかの接頭辞を追加することでのみ、特定のブラウザを識別するためのハックプレフィックス効果を示すために、目的のページを達成するために。

各バージョン6.1 IEブラウザのCSSハックテーブル

ハック 書き込み IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *色 青色 N N N
+ +カラー グリーン N N N
- -色 黄色 N N N N N N N N
_ _色 ブルー N N N N N
#色 パープル N N N
0 色:RED0 N N N N N N N
90 色:red90 ピンク N N N N N N N N
!重要 色:!青の重要な;色:緑; 褐色 N N N N N

6.2 IEブラウザの標準モード

(1) " -" IE6力に、独自のハック

(2)\9"" IE6 / IE7 / IE8 / IE9 / IE10テイク効果

(3)\0"" IE8 / IE9 / IE10テイク効果

(4)\9\0"" IE9 / IE10テイク効果

七、CSSハックセレクタプレフィックス法

ページ法のためのセレクタプレフィックスは、一貫性のないパフォーマンスですかCSSセレクタの前に接頭辞ハックを認識するために、ブラウザの特殊な治療、プラスだけで特定のブラウザが必要です。

セレクタプレフィックス法

続きを読みます

おすすめ

転載: www.cnblogs.com/jlfw/p/11964113.html