[解決済み】スタイルシート内でIE(どのバージョンでも)だけをターゲットにするには?
質問
継承したプロジェクトがあるのですが、全くダメなところがあります。そのうちのひとつがこれです。IE(バージョン問わず)だけをターゲットにしたいのですが。
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
はっきり言って 内部 埋め込みスタイルシートと なし htmlのタグにIDやクラスを追加する場合、ボーダースタイルを適用したい。 のみ ユーザがIEを使用している場合。どうすればいいでしょうか?
編集:Firefox用の解決策を見つけたので、これを反映するために質問を編集しています。
解決方法を教えてください。
Internet Explorer 9 以下 : 条件付きコメントを使って、特にターゲットとしたいバージョン(またはバージョンの組み合わせ)に対してIE固有のスタイルシートを読み込むことができます。
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
しかし、バージョン10からは、IEで条件付きコメントがサポートされなくなりました。
Internet Explorer 10 & 11 : ms-high-contrast を使用してメディアクエリを作成し、その中に IE 10 および 11 固有の CSS スタイルを配置します。ms-high-contrast は Microsoft 固有のもの(IE 10+ でのみ利用可能)なので、Internet Explorer 10 以上でのみ解析されます。
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12 : サポートルールを使用することができます。 このルールに関するすべての情報を含むリンクはこちらです。
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
インラインルールIE8検出
もう1つ、IE8以下のバージョンしか検出できないオプションがあります。
/* For IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
スタイルシートの埋め込みについて、ご指摘の通りです。以下のバージョンでは、メディアクエリと条件コメントが必要だと思います。
関連
-
[解決済み】サイドバーの位置を変更する
-
[解決済み] ユーザーエージェントのスタイルシートが私のCSSを上書きしないようにする方法
-
[解決済み] ボーダーの太さをパーセントで設定するには?
-
[解決済み] moz-とwebkit-とは何ですか?[重複しています]。
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] select2入力の幅を設定する(Angular-uiディレクティブを使用)
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled の開発中。
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] Bootstrap 4のclass="mb-0 "とは何ですか?
-
[解決済み] CSSでitempropをターゲットにする?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] cssのフォントサイズ14px/26pxってどうなってるの?
-
[解決済み] Font Awesomeで2つ以上のアイコンを重ねる/重ねるには?
-
[解決済み] psuedo 要素を用いたスクロール/ホバー可能な CSS ツールチップ
-
[解決済み] CSSでFirefoxだけをターゲットにする
-
[解決済み】IEでスタイルのみ適用する。