これが私の CSS ブロックです。
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
IE 7、8、および 9 のみを「表示」したいwidth: 100%
これを達成する最も簡単な方法は何ですか？
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
説明: これは Microsoft 固有のメディア クエリです。Microsoft IE に固有の -ms-high-contrast プロパティを使用すると、Internet Explorer 10 以降でのみ解析されます。メディア クエリの両方の有効な値を使用したため、ユーザーがハイ コントラストを有効にしているかどうかに関係なく、IE によってのみ解析されます。
2017年更新
環境によっては、IE10+で条件付きコメントが正式に廃止され、削除されました。
オリジナル
おそらく最も簡単な方法は、HTML でInternet Explorer の条件付きコメントを使用することです。
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
スタイルシート内で IE のみをターゲットにするために使用できるハック (アンダースコア ハックなど)は多数ありますが、すべてのプラットフォームですべてのバージョンの IE をターゲットにしたい場合は非常に面倒です。
IE の条件付きコメントとは別に、これはIE6 から IE10 をターゲットにする方法に関する最新のリストです。
IE 以外の特定の CSS および JS ハックを参照してください。
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
IEにはいくつかのハックがあります
スタイルシートで条件付きコメントを使用する
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
ヘッド セクション css での条件付きコメントの使用
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
HTML 要素で条件付きコメントを使用する
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
メディアクエリの使用
IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}
IE6,7
@media screen\9 {
selector { property:value; }
}
IE8
@media \0screen {
selector { property:value; }
}
IE6,7,8
@media \0screen\,screen\9 {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0\0){
selector { property:value; }
}
条件付きコメントだけでなく、CSS Browser Selector http://rafael.adm.br/css_browser_selector/を使用することもできます。これにより、特定のブラウザーをターゲットにすることができます。次に、CSSを次のように設定できます
.ie .actual-form table {
width: 100%
}
これにより、条件付きコメントを必要とせずに、メイン スタイルシート内で特定のブラウザーをターゲットにすることもできます。
これは少し遅れましたが、IE6および7の背景を非表示にしようとすると、これは完全に機能しました
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
私はこのハックを次の方法で入手しました：http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
ベスト プラクティスとして、<head>タグ内に IE 条件ステートメントを記述し、その内部に特別な ie スタイル シートへのリンクを含める必要があると思います。これは、カスタムcssリンクの後にある必要があるため、後者をオーバーライドします。私は小さなサイトを持っているので、すべてのページに同じ css を使用します。
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
これは、私が思うようにジェームズの回答とは異なります（私はデザイナーチームと協力しており、彼らが私のhtmlファイルに触れて何かを台無しにしたくないため、個人的な意見です）、htmlファイルにスタイルを含めるべきではありません。
それは本当にIEのバージョンに依存します... IE6-10から最新のこの優れたリソースを見つけました：
Internet Explorer 6 の CSS ハック
これは Star HTML Hack と呼ばれ、次のようになります。
- html .color {color: #F00;} このハックは、完全に有効な CSS を使用しています。
Internet Explorer 7 の CSS ハック
それはスタープラスハックと呼ばれています。
*:first-child+html .color {color: #F00;} または短いバージョン:
*+html .color {color: #F00;} スター HTML ハックのように、これは有効な CSS を使用します。
Internet Explorer 8 の CSS ハック
@media \0screen { .color {color: #F00;} } このハッキングでは、有効な CSS が使用されていません。
Internet Explorer 9 の CSS ハック
:root .color {color: #F00\9;} このハッキングも、有効な CSS を使用していません。
2013.02.04 追加: 残念ながら IE10 はこのハックを理解しています。
Internet Explorer 10 の CSS ハック
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } このハックも、有効な CSS を使用していません。