W3C 準拠の CSS で IE7 と IE8 をターゲットにしたい。あるバージョンの CSS を修正しても、他のバージョンでは修正されないことがあります。どうすればこれを達成できますか？
139439 次
7 に答える
165
HTML と CSS を使用して、ハッキングなしで明示的に IE バージョンをターゲットにする
CSS にハッキングを加えたくない場合は、このアプローチを使用してください。要素にブラウザー固有のクラスを追加して、<html>後でブラウザーに基づいて選択できるようにします。
例
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head></head>
<body></body>
</html>
次に、CSS で、ターゲット ブラウザーに非常に厳密にアクセスできます。
例
.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}
詳細については、http://html5boilerplate.com/をご覧ください。
CSS「ハック」で IE バージョンをターゲットにする
もっと言いたいのは、IE のバージョンをターゲットにするためのハックです。
IE8 以下をターゲットにするには、「\9」を使用します。
「*」を使用して、IE7 以下をターゲットにします。
「_」を使用して IE6 をターゲットにします。
例：
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
更新: ターゲット IE10
IE10 は条件ステートメントを認識しないため、これを使用して「ie10」クラスを<html>要素に適用できます
<!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
<head></head>
<body></body>
</html>
于 2010-12-03T19:45:04.557 に答える
21
条件付きコメントを調べて、問題のある IE 用に別のシートを作成することをお勧めします。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
于 2009-05-02T05:45:33.503 に答える
9
あなたの質問への答え
IE8 以下を除くすべてのブラウザーを選択する完全に有効な方法は、:rootセレクターを使用することです。IE バージョン 8 以下は をサポートしていないため:root、それを含むセレクターは無視されます。これは、次のようなことができることを意味します。
p {color:red;}
:root p {color:blue;}
これはまだ完全に有効な CSS ですが、IE8 以前では異なるスタイルがレンダリングされます。
その他のトリック
これは、私が見つけることができる完全に有効な CSSブラウザー固有のセレクターのすべてのリストです。
/****** First the hacks that target certain specific browsers ******/
* html p {color:red;} /* IE 6- */
*+html p {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
} /* Chrome, Safari 3+ */
p, body:-moz-any-link {color:red;} /* Firefox 1+ */
:-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p {color:red;} /* Firefox 4+ */
/****** And then the hacks that target all but certain browsers ******/
html> body p {color:green;} /* not: IE<7 */
head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p {color:green;} /* not: IE<8 */
body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:not([ie8min]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
クレジットと情報源:
于 2014-01-07T21:27:56.207 に答える
4
IE8 には互換モードがあるため、IE7 コードが IE8 で動作しないことを心配する必要はありません (IE7 と同じようにページをレンダリングできます)。しかし、それでも異なるバージョンの IE をターゲットにしたい場合は、条件付きコメントを使用するか、css ルールを * で開始して IE7 以下をターゲットにするという方法がしばらく前から行われてきました。または、サーバー上のユーザー エージェントに注意を払い、その情報に基づいて別の CSS ファイルを用意することもできます。
于 2009-05-02T05:44:29.450 に答える
3
実際の問題は IE8 ではなく、以前のバージョンの IE で使用するハックです。
IE8 はほぼ標準に準拠しているため、ハックはまったく必要なく、おそらくいくつかの微調整だけが必要です。問題は、IE6 および IE7 用のハックを使用している場合です。これらのバージョンにのみ適用され、IE8 には適用されないことを確認する必要があります。
少し前に弊社のWebサイトをIE8に対応させました。私が実際に変更した唯一のことは、ページがIE8に準拠していることをIEに伝えるメタタグを追加することでした...
于 2009-05-02T06:17:14.910 に答える
1
私はJavascriptを使ってそれをしました。html 要素に 3 つの CSS クラスを追加します。
ie<version>
lte-ie<version>
lt-ie<version + 1>
したがって、IE7 の場合はie7、lte-ie7...、lt-ie8... が追加されます。
JavaScriptコードは次のとおりです。
(function () {
function getIEVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
} else if (trident > 0) {
// IE 11 (or newer) => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
} else {
return NaN;
}
};
var ieVersion = getIEVersion();
if (!isNaN(ieVersion)) { // if it is IE
var minVersion = 6;
var maxVersion = 13; // adjust this appropriately
if (ieVersion >= minVersion && ieVersion <= maxVersion) {
var htmlElem = document.getElementsByTagName('html').item(0);
var addHtmlClass = function (className) { // define function to add class to 'html' element
htmlElem.className += ' ' + className;
};
addHtmlClass('ie' + ieVersion); // add current version
addHtmlClass('lte-ie' + ieVersion);
if (ieVersion < maxVersion) {
for (var i = ieVersion + 1; i <= maxVersion; ++i) {
addHtmlClass('lte-ie' + i);
addHtmlClass('lt-ie' + i);
}
}
}
}
})();
その後、.ie<version>potench で説明されているように、スタイルシートで css クラスを使用します。
( Check if user is using IE with jQueryで Mario の detectIE 関数を使用)
lte-ie8 や lt-ie8 などを使用する利点は、IE9 以下、つまり IE7 ～ IE9 のすべてのブラウザーをターゲットにできることです。
于 2014-04-02T15:33:49.423 に答える