[英]How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
在某些情況下，例如特定於Internet Explorer的CSS或特定於Internet Explorer的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"> 。
我不會使用JavaScript navigator.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不同 ，它在最終版本中也不會jQuery.browser 。 當然，不用說，用戶代理嗅探仍然像以往一樣脆弱，在任何情況下都不應使用。
如果您真的必須以IE10為目標，請使用有條件的編譯（可能會在不久的將來獲得支持），或者（如果可以幫助您）使用功能檢測庫（例如Modernizr）來代替（或與瀏覽器一起檢測）。 除非您的用例需要noscript或在服務器端安裝IE10，否則用戶代理嗅探將比可行的選擇更令人頭疼。
聽起來很麻煩，但請記住，作為一個現代的瀏覽器這是高度符合的到今天的Web標准1，假設你已經寫了互操作的代碼是高度符合標准，你不應該為IE10預留特殊的代碼，除非絕對必要，也就是說，就行為和渲染而言，它應該類似於其他瀏覽器。 2鑒於IE的歷史，這聽起來有些牽強，但是您期望Firefox或Chrome多少次表現出相同的方式卻令人沮喪？
box-sizing 如果您確實有理由要針對特定的瀏覽器，則一定要使用提供給您的其他工具來將它們嗅出。 我只是說，今天要找到這樣的理由比現在要困難得多，而且實際上這不是您可以依靠的。
1 不僅IE10，而且IE9甚至是處理大多數成熟CSS2.1標准的IE8都比Chrome更好，這僅僅是因為IE8如此專注於標准合規性（當時CSS2.1已經相當穩定，只有很小的差異）根據今天的建議），而Chrome似乎只是半拋光的尖端偽標准技術演示而已。
2 當我這樣說時我可能會有偏見，但可以肯定的是。 如果您的代碼可以在其他瀏覽器上運行，但不能在IE上運行，則與 3年前的早期版本IE相比， 使用您自己的代碼而不是IE10的可能性要大得多。 再說一次，我可能有偏見，但說實話： 你不是嗎？ 只要看看您的評論。
IE標准支持文檔是一個不錯的起點。
這是在JavaScript中定位IE10的方法：
if ("onpropertychange" in document && !!window.matchMedia) {
...
}
這是在CSS中定位IE10的方法：
@media all and (-ms-high-contrast: none) {
...
}
如果需要通過CSS過濾或重置IE11，請參見另一個問題： 如何為IE 11編寫CSS hack？
此處發布的兩種解決方案（稍作修改）都可以工作：
<!--[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 { }
和瞧！ -其他瀏覽器保持不變。 而且您不需要jQuery。 您可以在此處查看示例如何實現的示例： http : //kardash.net 。
我編寫了一個名為Layout Engine的小型香草JavaScript插件，該插件可讓您以一種無法偽造的簡單方式來檢測IE 10（以及其他所有瀏覽器），這與用戶代理嗅探不同。
它將呈現引擎名稱作為類添加到html標記上，並返回包含供應商和版本的JavaScript對象（如果適用）
查看我的博客文章： http : //mattstow.com/layout-engine.html並在GitHub上獲取代碼： https : //github.com/stowball/Layout-Engine
我使用此腳本-這是過時的，但是對於定向單獨的 Internet Explorer 10樣式表或JavaScript文件（ 僅當瀏覽器為Internet Explorer 10 時才包含）是有效的，與使用條件注釋的方式相同。 不需要jQuery或其他插件。
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
@end
@*/
</script >
您可以使用PHP為IE 10添加樣式表
喜歡：
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/);
正如其他人所提到的，我總是建議使用特征檢測。
如果要使用Vanilla JavaScript定位IE 10，則可能要嘗試CSS屬性檢測：
if (document.body.style.msTouchAction != undefined) {
document.body.className = 'ie10';
}
除了msTouchAction您還可以使用這些CSS屬性之一，因為它們當前僅在IE 10中可用。但是將來可能會改變。
我將CodePen上所有屬性的測試頁放在一起。
clipBoardData是僅在IE中可用的功能，因此，如果要定位所有IE版本，則可以使用
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
</script>
IE10 +和IE9的CSS
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ styles */
}
@media screen\0 {
/* IE8,9,10 styles*/
}
您可以使用功能檢測來查看瀏覽器是否為IE10或更高版本，如下所示：
var isIE = false;
if (window.navigator.msPointerEnabled) {
isIE = true;
}
僅當> IE9時為真
Conditionizr （請參閱文檔）會將瀏覽器CSS類添加到html元素，包括ie10。
使用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。 它檢測到IE 5到11。
您需要做的就是將其添加到某個位置，然后您始終可以通過簡單的條件進行檢查。 如果不是IE，則全局var isIE將是未定義的，否則它將是版本號。 因此，您可以輕松添加諸如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>
我在Windows 8.1上，不確定是否與ie11更新有關...
這是我為Internet Explorer做自定義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或打字稿轉換此代碼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％的答案。 我在此處的Microsoft網站上找到了其余答案。
下面的代碼是我用來定位所有目標的代碼，即通過向<html>添加.ie類
使用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-n
CSS的現代解決方案
html[data-useragent*='MSIE 10.0'] .any {
your-style: here;
}
如何僅使用JavaScript定位Internet Explorer 11？
[英]How can I target only Internet Explorer 11 with JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.