InternetExplorer固有のCSSやInternetExplorer固有のJavaScriptコードなど、特定の状況でInternet Explorer 10のみをターゲットにするにはどうすればよいですか？
私はこれを試しましたが、機能しません：
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10は条件付きコメントを無視し、の<html lang="en" class="no-js">代わりにを使用し<html class="no-js ie10" lang="en">ます。
なりすましの可能性があるため、JavaScriptnavigator.userAgentまたは$ .browser（を使用）は使用しません。navigator.userAgent
Internet Explorer 9、10、および11をターゲットにするには（注：最新のChromeも）：
@media screen and (min-width:0\0) {
/* Enter CSS here */
}
Internet Explorer 10をターゲットにするには：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS here */
}
エッジブラウザをターゲットにするには：
@supports (-ms-accelerator:true) {
.selector { property:value; }
}
出典：
私は誰かが貴重なコメントを持っていたこのサイトで解決策を見つけました：
解決策は次のとおりです。
if (Function('/*@cc_on return document.documentMode===10@*/')()){
document.documentElement.className+=' ie10';
}
それ
おそらく、次のようなjQueryを試すことができます。
if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}
このメソッドを使用するには、jQuery Migrateライブラリを含める必要があります。これは、この関数がメインのjQueryライブラリから削除されたためです。
私にとってはかなりうまくいきました。しかし、条件付きコメントに代わるものは確かにありません！
Internet Explorer 10は、条件付きコメントを読み取ろうとしなくなりました。これは、他のブラウザと同じように条件付きコメントを処理することを意味します。通常のHTMLコメントと同様に、完全に無視されることを意味します。例として質問で与えられたマークアップを見ると、IE10を含むすべてのブラウザーは、灰色で強調表示されたコメント部分を完全に無視します。HTML5標準では、条件付きコメント構文については言及されていません。これが、IE10でのサポートを停止することを選択した理由です。
ただし、コメントや最近の回答に示されているように、JScriptでの条件付きコンパイルは引き続きサポートされていることに注意してください。とは異なりjQuery.browser、最終リリースでもなくなることはありません。そしてもちろん、ユーザーエージェントのスニッフィングは相変わらず脆弱なままであり、いかなる状況でも決して使用されるべきではないことは言うまでもありません。
本当にIE10をターゲットにする必要がある場合は、近い将来もサポートされる可能性のある条件付きコンパイルを使用するか、ブラウザ検出の代わりに（またはブラウザ検出と組み合わせて）Modernizrなどの機能検出ライブラリを使用してください。ユースケースでnoscriptが必要な場合や、サーバー側でIE10に対応する必要がある場合を除いて、ユーザーエージェントのスニッフィングは、実行可能なオプションというよりも頭痛の種になります。
かなり面倒に聞こえますが、今日のWeb標準1に高度に準拠している最新のブラウザーとして、標準に高度に準拠している相互運用可能なコードを記述していると仮定すると、絶対に必要な場合を除いて、IE10用の特別なコードを確保する必要はありません。つまり、動作とレンダリングの点で他のブラウザに似ているはずです。2 IEの歴史を考えると、それはとてつもないことのように聞こえますが、FirefoxまたはChromeが同じように動作して、がっかりするだけだと何回期待しましたか？
box-sizing年も接頭辞なしをサポートしていませんでした特定のブラウザをターゲットにする正当な理由がある場合は、提供されている他のツールを使用してブラウザをスニッフィングしてください。今日、そのような理由を見つけるのは以前よりもはるかに困難になるだろうと言っているだけであり、それは本当にあなたが信頼できるものではありません。
1 IE10だけでなく、IE9、さらにはChromeよりもはるかに優れた成熟したCSS2.1標準のほとんどを処理するIE8もあります。これは、IE8が標準への準拠に重点を置いていたためです（当時、CSS2.1はすでにかなり安定しており、わずかな違いしかありませんでした。今日の推奨事項から）Chromeは、最先端の疑似標準の半分洗練された技術デモに過ぎないようです。
2 そして、私がこれを言うとき、私は偏見があるかもしれません、しかしそれは地獄がそうであるように確かです。コードが他のブラウザで機能するがIEでは機能しない場合、IE10ではなく独自のコードの問題である可能性は、たとえば3年前の以前のバージョンのIEと比較してはるかに優れています。繰り返しますが、私は偏見があるかもしれませんが、正直に言いましょう。あなたもそうではありませんか？コメントを見てください。
開始するのに適した場所は、IE標準サポートドキュメントです。
JavaScriptでIE10をターゲットにする方法は次のとおりです。
if ("onpropertychange" in document && !!window.matchMedia) {
...
}
CSSでIE10をターゲットにする方法は次のとおりです。
@media all and (-ms-high-contrast: none) {
...
}
IE11をCSSでフィルタリングまたはリセットする必要がある場合は、別の質問を参照してください： IE 11のCSSハックを作成するにはどうすればよいですか？
ここに掲載されている両方のソリューション（わずかな変更を加えたもの）は機能します：
<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->
また
<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>
cssリンクの前に、htmlページのheadタグ内に上記の行のいずれかを含めます。次に、cssファイルで、「ie10」クラスを親として持つスタイルを指定します。
.ie10 .myclass1 { }
そして、voilà！-他のブラウザはそのまま残ります。そして、jQueryは必要ありません。私がそれをどのように実装したかの例をここで見ることができます：http：//kardash.net。
私は、レイアウトエンジンと呼ばれる小さなバニラJavaScriptプラグインを作成しました。これにより、ユーザーエージェントのスニッフィングとは異なり、偽造できない簡単な方法でIE 10（および他のすべてのブラウザー）を機能検出できます。
レンダリングエンジン名をhtmlタグのクラスとして追加し、ベンダーとバージョン（適切な場合）を含むJavaScriptオブジェクトを返します。
私のブログ投稿をチェックしてください：http：//mattstow.com/layout-engine.htmlそしてGitHubでコードを入手してください：https ：//github.com/stowball/Layout-Engine
私はこのスクリプトを使用します-時代遅れですが、条件付きコメントの場合と同じように、ブラウザーがInternetExplorer10の場合にのみ含まれる別のInternetExplorer10スタイルシートまたはJavaScriptファイルをターゲットにするのに効果的です。jQueryやその他のプラグインは必要ありません。
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
@end
@*/
</script >
PHPを使用して、IE10のスタイルシートを追加できます
好き：
if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
<link rel="stylesheet" type="text/css" href="../ie10.css" />
}
これを行う必要がある場合は、JavaScriptでユーザーエージェント文字列を確認できます。
var isIE10 = !!navigator.userAgent.match(/MSIE 10/);
他の人が言っているように、私は常に代わりに機能検出をお勧めします。
VanillaJavaScriptを使用してIE10をターゲットにする場合は、CSSプロパティの検出を試してみてください。
if (document.body.style.msTouchAction != undefined) {
document.body.className = 'ie10';
}
代わりにmsTouchAction、これらのCSSプロパティの1つを使用することもできます。これは、現在IE 10でのみ使用できるためです。ただし、これは将来変更される可能性があります。
CodePenのすべてのプロパティを含むテストページをまとめました。
IE10+およびIE9のCSS
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ styles */
}
@media screen\0 {
/* IE8,9,10 styles*/
}
clipBoardDataはIEでのみ使用可能な関数であるため、すべてのIEバージョンをターゲットにする場合は、
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
</script>
機能検出を使用して、ブラウザがIE10以降であるかどうかを次のように確認できます。
var isIE = false;
if (window.navigator.msPointerEnabled) {
isIE = true;
}
>IE9の場合にのみtrue
Conditionizr （ドキュメントを参照）は、ie10を含むブラウザーCSSクラスをhtml要素に追加します。
JavaScriptの場合：
if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
document.getElementsByTagName('html')[0].className= 'no-js ie'; }
すべてのIEで動作します。
IE08 => 'Trident/4.0'
IE09 => 'Trident/5.0'
IE10 => 'Trident/6.0'
IE11 => 'Trident/7.0'
したがって/Trident/g、/Trident/x.0/gどこで、x = 4, 5, 6または7（または8将来のために）変更します。
IE検出のバージョンを追加したかっただけです。これは、 http： //james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/にあるスニペットに基づいており、ie10とie11もサポートするように拡張されています。IE5から11を検出します。
どこかに追加するだけで、いつでも簡単な状態で確認できます。グローバル変数isIEは、IEでない場合は未定義になり、そうでない場合はバージョン番号になります。そのため、好きなものを簡単に追加できif (isIE && isIE < 10)ます。
var isIe = (function(){
if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10 */ }
var undef,
v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/をチェックしてください
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
私の場合、次のコードは正常に機能し、すべての条件付きコメントはすべてのIEバージョンで機能します。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->
<script>
if (document.documentMode===10){
document.documentElement.className+=' ie10';
}
else if (document.documentMode===11){
document.documentElement.className+=' ie11';
}
</script>
私はWindows8.1を使用していますが、IE11の更新に関連しているかどうかはわかりません...
InternetExplorerのカスタムCSSを実行する方法は次のとおりです。
私のJavaScriptファイル：
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
jQuery(document).ready(function(){
if(var_isIE){
if(var_isIE == 10){
jQuery("html").addClass("ie10");
}
if(var_isIE == 8){
jQuery("html").addClass("ie8");
// you can also call here some function to disable things that
//are not supported in IE, or override browser default styles.
}
}
});
そして、私のCSSファイルで、それぞれ異なるスタイルを定義します。
.ie10 .some-class span{
.......
}
.ie8 .some-class span{
.......
}
このコードを変換するには、babelまたはtypescriptを使用してくださいjs
const browser = () => {
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
// "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
const _userAgent = navigator.userAgent;
const br = {
"Chrome": "Chrome",
"Edge": "Edge",
"Firefox": "Firefox",
".NET CLR": "Internet Explorer 11",
};
const nobr = {
"MSIE 10.0": "Internet Explorer 10",
"MSIE 9.0": "Internet Explorer 9",
"MSIE 8.0": "Internet Explorer 8",
"MSIE 7.0": "Internet Explorer 7"
};
let thisBrow = "Unknown";
for (const keys in br) {
if (br.hasOwnProperty(keys)) {
if (_userAgent.includes(keys)) {
thisBrow = br[keys];
for (const key in nobr) {
if (_userAgent.includes(key)) {
thisBrow = nobr[key];
}
}
}
}
}
return thisBrow;
};この答えは私にそこへの道の90％をもたらしました。私はここのマイクロソフトサイトで私の答えの残りを見つけました。
以下のコードは、すべてをターゲットにするために使用しているものです。つまり、.ieクラスをに追加することによって<html>
jQuery（1.9以降ではユーザーエージェントを優先して.browserを廃止しました。http：//api.jquery.com/jQuery.browser/を参照）を使用して.ieクラスを追加します。
// ie identifier
$(document).ready(function () {
if (navigator.appName == 'Microsoft Internet Explorer') {
$("html").addClass("ie");
}
});
IE10以降およびIE以外のブラウザーのターゲティングを気にしない場合は、次の条件付きコメントを使用できます。
<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->
http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-netherから派生
本当に必要な場合は、次の行を追加することで条件付きコメントを機能させることができます<head>。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
cssの最新のソリューション
html[data-useragent*='MSIE 10.0'] .any {
your-style: here;
}