CSS 条件付きアノテーションの理論と実践 ソース ファイル_エクスペリエンス交換

ブラウザの条件付きコメント理論。次の例を使用してこの問題を説明します。

(X)HTML

次のコードは、Microsoft の IE ブラウザで条件付きコメント ステートメントの効果をテストするものです。

バージョン 6

次のコードは、IE 以外のブラウザで実行される条件付きコメントです

Internet Explorer を使用していません

最終的には非 IE で動作します。特別な IE ブラウザ
(または、lte lt または gt gte を使用して判断します。

).

Internet Explorer バージョン 6 を使用しています

またはIE 以外のブラウザ

出典: cssplay.co.uk/menu/conditional.html" target="_blank"> http://www.cssplay.co.uk/menu/conditional.html

上記の条件付きコメントは、ブラウザの種類を判断し、どのブラウザにどのコンテンツが表示されるかを定義します。
このドロップメニュー (ドロップダウン メニュー) モデルは cssplay から来ており、作者が多くの研究とテストを繰り返した後に作成したもので、条件付きコメントの原理を実践するためにこのモデルを使用したいと考えています。

先見の最も完璧なモデル

次は xhtm

• デモ
  
  
  
  
  
  
  

  
  
  • ゼロドル広告ページ
  
  
  • 画像の周囲にテキストを折り返す
  
  
  • スタイル付きフォーム
  
  
  • アクティブ フォーカス li>
    
  • 境界線なしでホバー/クリック
  
  
  • シャドウ ボクシング
  
  詳細情報のイメージ マップ
  
  • 背景画像を使って楽しむ
  
  
  • フェード スクロール
  
  
  • em 画像サイズの比較
  
  

  
  
  
  
  
  

CSS



デュアル スタイルを使用して、ie と非 ie のスタイルをそれぞれ定義します。IE を使用する場合は、final_drop.css に基づきます。 Final_drop_ie.css を追加します。

まず、非 IE での CSS がどのように定義されているかを確認します。
.menu ul li ul {
display: none;
}
/* 非 IE に固有IE ブラウザ */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
/*マウスオーバー スタイルの定義*/
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width :150px;
}


非 IE では、マウスをロールオーバーすると、li に含まれる ul が表示されます。これは、これらのブラウザが li:hover の使用をサポートしているためです。

.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
/*マウスをロールオーバーすると li に含まれる ul が表示されます*/ .menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
marg\in-top:1px;
}

上記のfinal_drop.cssスタイルを継承すると、liに含まれるulはマウスがない場合には表示されなくなります。時間
なぜなら、

つまり、IE6 でマウスをロールオーバーすると、は、a:hover を通じて表示されます。ul コンテンツは、IE7 では、li:hover を通じて
同じ効果を表示します。