如何只针对某些情况下的特定 Internet Explorer 10，例如特定于 Internet Explorer 的 CSS 或特定于 Internet Explorer 的 JavaScript 代码？

如何只针对某些情况下的特定 Internet Explorer 10，例如特定于 Internet Explorer 的 CSS 或特定于 Internet Explorer 的 JavaScript 代码？

我试过了，但没用:

<!--[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">。

164685 次浏览
小开

Internet Explorer 10不再尝试阅读有条件的评论。这意味着它会像对待其他浏览器一样对待条件注释: 就像对待普通的 HTML 注释一样，意味着要完全忽略它。以问题中给出的标记为例，包括 IE10在内的所有浏览器都会完全忽略评论部分，即突出显示的灰色。HTML5标准没有提到条件注释语法，这正是他们选择在 IE10中停止支持它的原因。

但是请注意，仍然支持 JScript 中的 条件式编译，如注释和最近的答案所示。它也不会在最终版本中消失，不像 jQuery.browser。当然，不用说，用户代理嗅探仍然像以往一样脆弱，在任何情况下都不应该使用。

如果你真的必须以 IE10为目标，要么使用条件编译，它可能在不久的将来仍然会得到支持，要么ーー如果你能够帮助的话ーー使用特征提取库，如 现代化，而不是(或者结合)浏览器检测。除非您的用例需要 noscript 或在服务器端适应 IE10，否则用户代理嗅探将是一个比可行选项更令人头疼的问题。

听起来相当麻烦，但是请记住，作为一个高度符合当今网络标准的现代浏览器，假设你已经编写了高度符合标准的可互操作代码，除非绝对必要，否则你必须为 IE10留出特殊的代码，也就是说，它应该在行为和渲染方面与其他浏览器相似。 2考虑到 IE 的历史，这听起来有点牵强，但是有多少次你期望 Firefox 或 Chrome 以同样的方式行事，结果却遭遇挫折？

如果 做有正当理由瞄准某些浏览器，那么一定要用给您的其他工具来嗅出它们。我只是想说，你今天要找到这样一个理由会比过去困难得多，而且这真的不是你可以依靠的东西。

不仅仅是 IE10，IE9，甚至 IE8在处理大部分成熟的 CSS2.1标准方面都比 Chrome 好得多，这仅仅是因为 IE8非常关注标准的兼容性(当时 CSS2.1已经相当稳定，与今天的推荐标准只有细微的差别) ，而 Chrome 似乎只是一个半成品的前沿伪标准的技术演示。

当我说这些的时候，我可能会有偏见，但是确实如此。如果你的代码可以在其他浏览器上运行，但不能在 IE 中运行，那么与三年前的 IE 相比，使用 这是你自己的代码的问题而不是 IE10的可能性要大得多。再次，我可能有偏见，但让我们诚实: 你不也是吗？看看你的评论。

小开
最佳答案

也许你可以试试这样的 jQuery:

if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}

要使用此方法，必须包含 jQueryMigrate 库，因为此函数已从主 jQuery 库中删除。

对我来说很好，但是肯定没有条件评论的替代品！

小开

我在 这个网站上找到了一个解决方案，有人拥有一个有价值的 评论:

解决办法是:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
document.documentElement.className+=' ie10';
}

它

  • 不需要条件注释;
  • 即使注释剥离压缩/处理也能正常工作;
  • 没有在 Internet Explorer 11内加入 ie10类别;
  • 更有可能在 Internet Explorer 11 Internet Explorer 10兼容模式下运行;
  • 不需要独立的脚本标记(可以直接添加到其他 JavaScript 代码中)。
  • 不需要 jQuery 来测试
小开

这里张贴的两个解决方案(稍作修改)都可以工作:

<!--[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。

小开

如果必须这样做，可以检查 JavaScript 中的用户代理字符串:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

正如其他人提到的，我总是推荐特征提取。

小开

我使用的是这个脚本——它已经过时了，但是在针对包含 除非的 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 >
小开

我编写了一个名为 布局引擎的小型 JavaScript 插件，它可以让你以一种简单的方式检测 IE 10(以及其他所有浏览器) ，这种方式不会被伪造，不像用户代理嗅探那样。

它将呈现引擎名称作为类添加到 html 标记中，并返回一个包含供应商和版本(在适当的地方)的 JavaScript 对象

查看我的博客文章: http://mattstow.com/layout-engine.html，并获取 GitHub 上的代码: https://github.com/stowball/Layout-Engine

小开

我不会使用 JavaScriptnavigator.userAgent或 $浏览器(它使用 navigator.userAgent) ，因为它可以被欺骗。

至于目标 Internet Explorer 910和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; }
}

资料来源:

小开

如果你想用 Vanilla JavaScript 来定位 IE10，你可以尝试 CSS 属性检测:

if (document.body.style.msTouchAction != undefined) {
document.body.className = 'ie10';
}

CSS 属性

您也可以使用这些 CSS 属性中的一个来代替 msTouchAction，因为它们目前只能在 IE10中使用。但这种情况在未来可能会改变。

  • MsTouchAction
  • MsWrapFlow
  • WrapMargin 女士
  • Wrapthrough 小姐
  • 限制
  • 局限性 XMin
  • 有限公司
  • 最大限度
  • 最大
  • Flexbox 小姐
  • MsFlex
  • MsFlexOrder

测试页

我整理了一份 测试页和 CodePen 上的所有资产。

小开

您可以使用 PHP 为 IE10添加样式表

比如:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
<link rel="stylesheet" type="text/css" href="../ie10.css" />
}
小开

你可以使用特征提取查看浏览器是否是 IE10或更高版本，如下所示:

var isIE = false;
if (window.navigator.msPointerEnabled) {
isIE = true;
}

只有当 > IE9时才为真

小开

一个很好的起点是 IE 标准支持文档。

以下是如何在 JavaScript 中定位 IE10:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

以下是如何在 CSS 中定位 IE10:

@media all and (-ms-high-contrast: none) {
...
}

如果 IE11需要通过 CSS 过滤或重置，请参阅另一个 问题: 如何为 IE11编写 CSS 代码？

小开

ClipBoardData 是一个只能在 IE 中使用的函数，所以如果你正在寻找所有的 IE 版本，你可以使用它

<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
</script>
小开

Conditionizr (见文件)将向 html 元素添加浏览器 CSS 类，包括 ie10。

小开

这个答案让我走了90% 的路，我在 点击这里查看微软网站上找到了剩下的答案。

下面的代码是我通过向 <html>添加一个.ie 类来定位所有 ie 的代码

使用 jQuery (在1.9 + 版本中不推荐使用浏览器，支持用户代理，请参阅 http://api.jquery.com/jQuery.browser/)添加一个. ie 类:

// ie identifier
$(document).ready(function () {
if (navigator.appName == 'Microsoft Internet Explorer') {
$("html").addClass("ie");
}
});
小开

看看 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 */
}
小开

使用 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 版本中都能正常工作:

<!--[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{
.......
}
小开

现代 CSS 解决方案

html[data-useragent*='MSIE 10.0'] .any {
your-style: here;
}
小开

我只是想添加我的 IE 检测版本。它基于在 http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/上找到的一个代码片段，并扩展为也支持 ie10和 ie11。它检测 IE 5到11。

所有您需要做的就是将它添加到某个地方，然后您总是可以使用一个简单的条件进行检查。如果不是 IE，全局变量 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;
}());
小开

如果你不介意针对 IE10及以上浏览器和非 IE 浏览器，你可以使用以下条件注释:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

源自 http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

小开

如果你真的不得不这样做，你可以通过在 <head>中添加以下代码行使条件注释起作用:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

来源

小开

用于 IE10 + 和 IE9的 CSS

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ styles */
}


@media screen\0 {
/* IE8,9,10 styles*/
}
小开

使用 babel 或者类型转换这段代码

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;
};


提交答案