CSSハック事典 - IE6-IE10、FireFox、Chrome、Operaの見分け方を教えます_Experience交換

現在のブラウザは、IE6 ～ IE10、Firefox、Chrome、Opera、Safari です。 。 。 100 の学派が争っていると言えるほど多くのものがあり、ユーザーにとっては多くの選択肢がありますが、これは Web フロントエンド開発者にとっては苦痛です。
今日は、IE の一般的なハックと、Firefox、Chrome、Opera ブラウザのハックなど、一般的に使用される CSS ハックをいくつか整理しました。これらの CSS ハックを組み合わせて、小さなブラウザ テスターを作成しました。図に示すように:

コードを見てみましょう:

html 部分:

コードをコピー コードは次のとおりです。

IE6 での背景色: #cccphpc nltphpcn /span>

IE7 での背景色: #666

#06f
#f00php c nltphpcn/span>

IE10 背景色：#0ff

webキット、Safari、Chrome 背景色: #ff0

FireFox の背景色: # f 0f

Opera の背景色: #0f0

> n

CSS 部分。この部分にはコードの Hack 部分のみが投稿され、レイアウトは投稿されません。

コードをコピー コードは次のとおりです。

.content .test {
幅: 200px ;
高さ: 200px;
背景: #f60; /*all*/
背景: #06f9; /*IE*/
*背景: #666; /*IE6, 7*/
_background: #ccc; /*IE6*/
}

/* Webkit と opera */
@media all and (min-width:0){
.content .test {
背景: #0f0;
}
}

/* webkit */
@media screen and (-webkit-min-device-pixel-比率:0 ) {
.content .test {
背景: #ff0;
}
}

/*FireFox*/
@-moz-document url- prefix() {
.content .test {
背景: #f0f;
}
}

/*IE9 */
@media all and (min-width :0) {
.content .test{
背景: #f009;
}
}

/*IE10 */
@media 画面と (-ms-ハイコントラスト : アクティブ)、(-ms-ハイコントラスト : なし) {
.content .test {
.content: 背景: #0ff;
}
}
ディビジョン>

css-hack-ms-moz-webkit -o-Jb51.net.rar