css hackの認識

1899 ワード

ブラウザ IE 互換性 firefox

Webサイトのフロントエンドとして、異なるブラウザに対するWebサイトの互換性を考慮する必要があります.
CSS Hackには、CSSクラス内部Hack、セレクタHack、HTMLヘッダリファレンス(if IE)Hackの3つの表現があり、CSS Hackは主にクラス内部HACKを対象としている.例えばIE 6は下線「」を認識できるとアスタリスク"*"、IE 7はアスタリスク"*"を認識できますが、下線""は認識できません.firefoxは両方とも認識できません.など
セレクタHack:例えばIE 6は*htmlを認識できる.class{},IE 7は*+htmlを認識できる.class{}または*:first-child+html.class{}.など
HTMLヘッダリファレンス(if IE)Hack:すべてのIE:,IE 6および以下のバージョン:,このようなHackはCSSだけでなく,判断文に書かれたすべてのコードに対しても有効である.
書く順番は、認識力の強いブラウザのCSSを前に書くのが一般的です.次はどのように書いてもっと詳しく話しますか.
CSS hack:IE 6,IE 7,firefoxを区別
異なるブラウザを区別し、CSS hackの書き方:
IE 6とFFの区別:

background:orange;
*background:blue;

IE 6とIE 7を区別する:

background:green!important;
background:blue;

IE 7とFFの区別:

background:orange;
*background:green;

区別FF,IE 7,IE 6:

background:orange;*background:green;
_background:blue;background:orange;
*background:green!important;
*background:blue;

注:IEはすべて*を識別することができます;FFなどの標準ブラウザでは*を認識できません.
IE 6は*を識別することができる;認識できない!important;
IE 7は*を識別することができて、識別することができます!important;
FFは*を認識できませんが、認識できます!important;
ブラウザ優先度:FF「#demo{width:100 px;}」例として;
#demo {width:100px;}/*FIREFOX,IE 6,IE 7によって実行される.*/
* html #demo {width:120px;}/*IE 6によって実行され、以前の定義は後に上書きされるので、#demoの幅はIE 6で120 px;*/
*+html #demo {width:130px;}/*IE 7によって実行されます*/
最後に、#demoの幅は3つのブラウザでFIREFOX:100 pxと解釈されます.ie6:120px; ie7:130px;
IE 8最新css hack:
"9"例:「border:1 px9;」.ここの"9"はすべてのIEとFireFoxを区別することができる.(IE 9 Hackのみ)
"0"IE 8が認識する、IE 6、IE 7はできない.
"*"IE 6,IE 7は認識可能である.IE 8、FireFoxはできません.
"_"IE 6は""を認識することができ、IE 7、IE 8、FireFoxはできない.

エレメントをinline-blockに設定した後の上下margin融合

フロントエンドhtml文字divで自動改行を実現するには