ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSハック事典 - IE6-IE10、FireFox、Chrome、Operaの見分け方を教えます_Experience交換

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

WBOY
リリース: 2016-05-16 12:03:43
オリジナル
1638 人が閲覧しました

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

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

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

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ハック事典 - IE6-IE10、FireFox、Chrome、Operaの見分け方を教えます_Experience交換css-hack-ms-moz-webkit -o-Jb51.net.rar

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート