ブラウザのバージョンを決定し、複数のブラウザと互換性があることを示すステートメント

IE6以下で表示可能


IE7以下で表示可能


IE6バージョンのみ表示されます

<![if !IE]>
<![endif]>
IE以外のバージョン


IE8以下で表示可能


IE7以下で表示可能

使用法：
（１）
次のコードを使用して、現在の IE ブラウザのバージョンを検出できます (注: 効果は IE 以外のブラウザでは表示されません) <!––[if IE]>
<h1>Internet Explorer を使用しています</h1> <!––[IE 5 の場合]>
<h2>バージョン 5</h2> <![endif]––>
<!––[IE 5.0の場合]>
<h2>バージョン 5.0</h2> <![endif]––>
<!––[IE 5.5の場合]>
<h2>バージョン 5.5</h2> <![endif]––>
<!––[IE 6の場合]>
<h2>バージョン 6</h2> <![endif]––>
<!––[IE 7の場合]>
<h2>バージョン 7</h2> <![endif]––>
<![endif]––>
現在のブラウザが IE だが、バージョンが IE5 未満の場合はどうなるでしょうか? <!–[if ls IE 5]> を使用できます。もちろん、条件付きコメントは IE5 以上の環境でのみ使用できるため、<!–[if ls IE 5]> はまったく実行されません。 lte: は Less than or equal to の略語で、以下を意味します。 lt: Less than の略語で、より小さいという意味です。 gte: は Greater than or equal to の略語で、以上を意味します。 gt: Greater than の略語で、「より大きい」という意味です。 ! : 等しくないという意味で、JavaScript の等しくない判定演算子と同じです。

（２）
条件付きコメントの適用方法は、この記事の冒頭で説明しました。IE ブラウザはバージョンによって、私たちが作成する WEB 標準ページの解釈が異なり、具体的には CSS の解釈が異なります。これらに対応するために、条件付きコメントを使用して個別に定義し、最終的に互換性の目的を達成することができます。たとえば: 

<link rel="stylesheet" type="text/css" href="css.css" />< !-–[IE 7 の場合]>

<!–- IE ブラウザのバージョンが 7 の場合は、ie7.css スタイルシートを呼び出します – –>

<link rel="スタイルシート" type="text/css" href="ie7.css" />< ![endif]–->

<!–-[lte IE 6の場合]>

<!–- IE ブラウザのバージョンが 6 以下の場合は、ie.css スタイルシートを呼び出します-–>

<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–> これにより、IE7 未満のブラウザと IE6 間で CSS の実行が区別され、互換性が実現されます。同時に、最初の行のデフォルトの css.css は、IE 以外の他のブラウザとも互換性があります。

注意: デフォルトの CSS スタイルは HTML ドキュメントの最初の行に配置する必要があり、条件付きコメント判定のすべてのコンテンツはデフォルトのスタイルの後に配置する必要があります。たとえば、次のコードは、IE ブラウザで実行すると赤で表示されますが、IE 以外のブラウザで実行すると黒で表示されます。条件付きコメント判定を1行目に置くと実装できません。この例は、IE ブラウザと非 IE ブラウザ間の互換性の問題を解決する方法をよく示しています。 <style type="text/css"> 本文{ 背景色: #000; } < /style> < !-–[IEの場合]>

<style type="text/css">本文{背景色: #F00;} /style>< ![endif]–->

同時に、IE 以外のブラウザで状況を定義するために <!–-[if !IE]> を使用しようとする人もいるかもしれませんが、条件付きコメントは IE ブラウザでのみ実行できることに注意してください。このコードは、IE 以外のブラウザで条件の下で定義が実行されないだけでなく、コメントとして無視されます。

標準はデフォルトのスタイルであり、条件付きコメントは IE ブラウザで特別な処理が必要な場合にのみ実行されます。 CSS ファイルではなく、HTML ファイル内です。

これらのコメントは、DWcs4 の「ウィンドウ -> コードスニペット -> コメント」で利用できるようになりました。他のバージョンには気付いていません。

<<: Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル

>>: Nodejs-cluster モジュールの知識ポイントの概要と使用例