設定するにはCSSハックを使用してください。CSSハックの目的は、異なるブラウザを使用してCSSのコード互換性を持たせることです。もちろん、我々はターン使用CSSでブラウザのバージョンによって異なりカスタムCSS効果を書くためにハックすることができます。
1.原理
異なるブラウザは異なる分析結果とCSSをサポートしているため、だけでなく、CSSでの関係の優先順位ので。私たちは、これに基づいて別のブラウザごとに異なるCSSを書くために来ることができます。
「*」、「_」は、例えばIE6の下線を識別し、アスタリスク:ハックCSSは、主に内部クラスのハック、CSSハックハック(IE場合)は、基本的に三種類の形態、ハック内部CSSクラス、およびハックセレクタHTML参照ヘッドであります、IE7は、アスタリスク「*」を特定することができますが、アンダースコア「_」を認識していない、との両方のFirefoxは知りません。等
セレクタハックは:* HTMLの.class {}、IE7が認識ようなIE6を認識* + HTMLの.class {}または*:最初の子+ HTMLの.class {}。等
HTMLのヘッド基準ハック(IEの場合):すべてのIE用:<! - [場合はIE]> <[endifの] - !>、IE6のため、以下< - - あなたのコード!> <! ! - あなたのコード - - > <[endifの] - > <![LT IE 7場合]>だけではなく、力へのCSSハックのこのタイプのため、裁判官に文の中書かれたすべてのコードが有効になります。
順序を書く、一般的には、背中に書かれたブラウザのCSSを識別するための強力な能力です。ここで言っにより詳細に記述する方法です。
2、一般的に使用されるCSSハック方法
(1)モード注釈プロセス条件
IEはのみ適用されます
<! - [場合はIE]>
このテキストは唯一であるIEブラウザの表示
<![endifの] - >
唯一のIE6で有効になります
<! - [IE 6の場合]>
このテキストはIE6ブラウザに表示されます。
<![endifの] - >
唯一のIE6以降で有効になります
<! - [GTE IE 6の場合]>
このIE6以上で、テキストのみ(を含む)のバージョンのIEブラウザの表示
<![endifの] - >
IE8での効果的なだけでなく、
<! - [場合!IE 8]>
このテキストは非IE8ブラウザに表示されています
<![endifの] - >
非IEブラウザを有効にします
<! - [場合はIE!]>
このテキストは、唯一の非IEブラウザを表示されます
<![endifの] - >
(2)第2カテゴリー属性プレフィックス内のメソッドの方法を
財産法は、プレフィックス番号のプレフィックスが効果を示すために、目的のページを達成するために、CSSスタイルプロパティ名の前に認識するための唯一の特定のブラウザをハック追加することです。
IEブラウザのCSSハックテーブルの各バージョン
説明:標準モードでは、
「 - 」マイナス記号は、IE6固有のハックです
"\ 9" IE6 / IE7 / IE8 / IE9 / IE10が有効になります
"\ 0" IE8 / IE9 / IE10は、ハックIE8 / 9月10日のを有効になります
"\ 9 \ 0" のみ力にIE9 / IE10のために、ハックされたIE9 / 10代
(3)CSSハック方法3:選択プレフィックス法
法律のためのセレクタプレフィックスは、ページの一部またはCSSセレクタをハックした前に認識するだけで特定のブラウザの特別なブラウザの治療に加え、いくつかの接頭辞を必要とするパフォーマンスと矛盾しています。
最も一般的なのはあります
* HTML形式*プレフィックスのみIE6開始* + HTML * + IE7プレフィックスのみ取る効果@media画面\ 9 {...}のみIE6 / 7開始@mediaの\の0screen {体{背景:赤;}}のみIE8有効@media \ 0screen \、画面\ 9 {体{背景:青;}}のみIE6 / 7/8有効@media画面\ 0 {体{背景:緑;}}有効@のみIE8 / 9/10用メディア・スクリーンと(最小幅:0 \ 0){本体{背景:灰色;}}のみIE9 / 10有効@media画面(-ms-高コントラスト:アクティブ)、(-ms-高コントラスト:なし){本体{背景:オレンジ;}}のみなどIE10のために有効ではありません
3、実用化
例えば、IE6とFirefoxの両方のブラウザを区別するために、次のように記述することができます:
DIV {背景:緑; / * forfirefox * / *背景:赤; / * forIE6 * /(bothIE6 && IE7)}
私は緑、赤であるFirefoxで見られているIE6で見ました。
説明:
Firefoxでどのような上記のCSS、それはその事の後ろにアスタリスクが認識されないので、それは無視され、除外され、構文解析することにより得られた結果は次のとおりです。そして、もちろんこのDIV:DIV {緑の背景}背景が緑色です。
そして、次に優先度に応じて、赤、高優先度の後ろに{:;赤*背景緑色の背景} DIV:IE6、それにおいては、2つの背景を識別することができ、それは結果が得られた構文解析しますもちろん、DIVの背景色は赤です。
次のように4、幅属性IE6,7,8別々に定義されたコードであります
1
2
3
4
5
|
div{
width
:
200px
;
/*所有浏览器都能识别 包括IE7*/
-
width
:
180px
;
/*只有IE6识别,识别后会覆盖通用width的设置,达到IE6单独设置的效果*/
-
width
:
180px
\
0
;
/*IE8以上的浏览器识别,识别后会覆盖通用width的设置,达到IE8单独设置的效果*/
}
|