1

Chrome、IE、および FF で正しく整列していない div があります。Chrome には padding-left:40px; が必要です。IE と FF はそうではありません。私は if で数時間遊んでいて、単純なものが欠けていることを知っています。これは私が試してきたことです：

<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->

通常のstyle.cssでも試しました：

<!--[if !IE]--> 
#lower .expo {padding-left:40px;}
<!-- <![endif]-->

または #lower .expo {幅:400px; パディングトップ:40px; フロート:左;}

私もこれを試しました：

#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->

興味深いことに、これを行うと：

<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}

IE では正しく表示されますが、FF や Chrome では表示されません。それは私を夢中にさせます。シンプルなものが欠けているに違いありませんが、あまりにも長い間見てきました。

4

2 に答える 2

8

実際のエラーのために、それはコメントのやり方にあります。そのはず：

<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->

それよりも良い方法として、私が使用するものは次のとおりです。

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6"    lang="en"><![endif]-->
<!--[if IE 7]>    <html class="ie7"    lang="en"><![endif]-->
<!--[if IE 8]>    <html class="ie8"    lang="en"><![endif]-->
<!--[if IE 9]>    <html class="ie9"    lang="en"><![endif]-->
<!--[if IE 10]>   <html class="ie10"   lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->

この方法の利点は、1 つのスタイルシートのみを使用するというベスト プラクティスを維持できることです。ハッキングしたい対応する IE クラスをターゲットの前に置くだけです。

例えば： .ie6 #target-id

より詳細な説明については、ポール アイリッシュの記事をご覧ください。

条件付きスタイルシート vs CSS ハック? 答え: どちらでもない!

アップデート：

2012.01.17: これは、HTML5 ボイラープレートにある現在のイテレーションです。実際には、IE ≤8 (安全な css ハックで使用するため) の .oldIE クラスを 1 つに減らそうとしましたが、うまくいきませんでした。とにかく、私たちの現在のバージョン..

<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
于 2012-04-26T13:10:22.743 に答える
1

この JavaScript ファイルをダウンロードしてみてください。http://firststepdesign.org/browserselect.js次に、html にリンクします。

<script src="browserselect.js" type="text/javascript"></script>

その後、css に移動し、これらを使用して、さまざまなブラウザー用の特定の css を選択します。

Internet Explorer だけがこれを検出します。

.ie .example {
  background-color: yellow
}

Firefox だけがこれを検出します。

.gecko .example {
  background-color: gray
}

これを検出できるのは Safari と Chrome だけです。

.webkit .example {
  background-color: black
}

さらにコメントが必要な場合は、これが役立つことを願っています。

于 2012-04-26T13:15:25.593 に答える