IE 10 特定样式 | CSS-Tricks

Chris Poteet

# 2013年6月12日

这在 HTML 标签上的包含有点糟糕。您至少可以进行一点正则表达式清理吗？

Jeremy

评论永久链接# 2013年6月13日
有趣的是，我们经常在试图摆脱第一个糟糕的东西时，使用其他糟糕的东西。我建议使用一个简单的方法来完成这项工作，可能是 indexOf。
```
var doc = document.documentElement;
doc.setAttribute(
    'data-useragent',
    (navigator.userAgent.indexOf("MSIE 10.0") !== -1 ? "MSIE 10.0" : "no-MSIE 10.0");
```

Louis

# 2013年6月12日

有趣的技巧，但我认为这不是最好的方法。这基本上不是用户代理嗅探吗？

我在这篇文章中介绍了三种定位 IE10 的方法

http://www.impressivewebs.com/ie10-css-hacks/

我认为这些方法要好得多（我并没有发明它们；我引用了参考文献）。它们也不是完美的，但据我所知，它们有效，并且不需要有问题的 UA 字符串检测。

另请参阅该帖子中带有绿色勾号的评论，因为有一些关于使用此类技术的好的补充和警告。

Ron

评论永久链接# 2013年6月12日

我认为使用用户代理嗅探来确定品牌/平台之类的事情是完全合理的。如果品牌/平台对您的演示文稿或行为很重要，这是唯一的选择。

我同意我们不应该将用户代理嗅探与关于可用功能/行为的假设结合使用。这绝对最好通过 JavaScript、CSS 媒体查询和 CSS @supports 来完成。
afishel

评论永久链接# 2013年6月13日

我发现用户代理嗅探在某些情况下使用 CSS 是完全合理的。每个浏览器至少都有一个与其他浏览器不同的细微差别，无论是边距的舍入问题还是文本的呈现方式。能够选择特定浏览器来修复此类问题非常有帮助，尤其是在与喜欢像素级完美的公司打交道时。

如果另一个浏览器稍后决定实现它，尝试使用特性检测来确定浏览器是什么可能会导致问题。如果有人想欺骗他们的字符串，他们只会获得不太完美的体验。

显然，特性检测是用于功能和大多数其他事物的最佳方法，但在我看来，用户代理嗅探仍然可以使用。
anhducbkhn

评论永久链接# 2013年6月28日

谢谢兄弟。
我使用以下代码

@media screen and (min-width:0) {
/* IE9 和 IE10 规则集位于此处 */
}

对我来说有效。

Jonathan Sampson

# 2013年6月12日

这本质上是通过 CSS 进行用户代理嗅探。最终，很少有理由认为这应该是可以接受的。Chris 和 Dave 在 Shop Talk Show 上多次讨论过为什么 UA 嗅探是不好的做法，因此我不需要在这里赘述。最终，这是一个巧妙的技巧，可以使用您的 CSS 选择器定位用户代理字符串，但最终仍然是一种破坏 Web 并让我们倒退的做法。

当 10.1 发布时，或者当另一个浏览器发布类似的超级字符串（如 AMSIE 10.01）时，或者如果 Microsoft 决定将 UA 字符串简单地更改为“IE 10.0”（在 IE11 泄露后谈论过此事），上述方法将不足以应对。

始终依赖功能而不是可变字符串；除了在极少数情况下。在这些合法的情况下，这是一个将您的 CSS 连接到导航器属性的漂亮做法。

Michael Arestad

评论永久链接# 2014年3月18日

这是一个仅需要定位 IE10 的好例子。 http://codepen.io/MichaelArestad/full/KtLsl

IE 中的输入字段的行为从未完全像其他浏览器。我不知道有任何涉及基本占位符文本样式的特性检测。IE11 最近解决了大多数这些涉及输入字段中占位符文本呈现的行为错误。因此，我需要定位 IE 10 而不是功能。IE 还做了一些奇怪的事情，涉及动画和下载的组合。这也无法通过特性检测解决。

我同意在 99% 的情况下，特性检测是最佳选择。

Marcel

# 2013年6月12日

我喜欢这种方法，但使用 JS 嗅探 UA 字符串并将正确的类添加到 HTML 元素中可能会更简洁一些。您怎么看？

Ivan

# 2013年6月12日

我对选择器代码风格有一点疑问。
也许，使用经典的爱尔兰类样式更好，比如，您怎么看？
看起来 .ie10 更容易使用

Ivan

评论永久链接# 2013年6月12日

< html class=”ie10″>，我的意思是
Jonathan Sampson

评论永久链接# 2013年6月12日

我认为这里的重点是首先允许您拥有定位用户代理字符串任何部分的能力，而无需使用 JavaScript 来查找特定部分。毕竟，如果您想包含 Chrome、Safari、Firefox、Opera 和 Internet Explorer，您的 JavaScript 可能会变得有点冗长。加上一些版本号以增加挫败感。这种方法的优点（尽管这种做法仍然很糟糕）在于您可以将这些工作放在您的 CSS 中，很多人在那里感觉更舒服。
Louis

评论永久链接# 2013年6月12日

Ivan，您只能在 IE6-9 中使用 Paul Irish 的条件类，不能在 IE10 中使用。这就是 Chris 发布此帖子的原因，因为您无法使用 CC 定位 IE10。（请参阅帖子中的第一个链接）。

Subash

# 2013年6月12日

我不会测试它是否有效：D

Scott Simpson

# 2013年6月12日

可悲的是，这是必需的。到目前为止，IE10 的渲染方式与 Chrome 或 FF 不同。这段代码：html[data-useragent*=’MSIE 10.0′] — 有点冗长，但创建 TextExpander 中的代码片段非常简单。谢谢 Chris！

Jonathan Sampson

评论永久链接# 2013年6月12日

Scott，我很想知道您在 IE10 中发现了哪些与 Chrome/FF 大不相同的东西，以至于需要使用 ua 嗅探。根据我的经验，IE10 是一款出色的浏览器，很少提供与 Chrome 或 Firefox 显著不同的体验。我知道一些区域（例如渐进增强表单元素，如 <metric>、<input type='number'> 和 <range>）看起来不同，但没有损坏。
Jamie

评论永久链接# 2013年7月24日

border-collapse 是 IE10 的一个问题，IE 和 Chrome 还有一些关于渐变和背景的奇怪错误。

Firefox 在 outline-offset 方面存在问题。

对于在 Firefox/Chrome 和 IE 上几乎统一的体验，您不幸需要这些技巧。
thewoozle

评论永久链接# 2013年7月24日

想到 Windows 8.1 即将到来……到 2013 年底，IE10 将成为一个遗留浏览器，这很奇怪。

Jozsef Kerekes

# 2013年6月12日

好吧，条件注释是嗅探浏览器的最佳方法，因为它们在页面加载后立即被激活。当您嗅探出像 IE 这样的浏览器并在 body 上添加一些类，比如 msie，然后在 css 中为这个 .msie 类添加 IE 特定的样式时，它可能会非常慢。IE7、IE8 由于延迟而出现难看的闪烁，直到 javascript 加载并在 body 上添加类。条件注释可以立即生效，html 解决方案始终比 js 解决方案快。

不错的帖子@Louis！

Ron

评论永久链接# 2013年6月12日

如果您的初始 HTML 由服务器动态构建，那么服务器代码（例如 Ruby、PHP、JavaScript 等）可以注入“data-…”属性。然后，CSS 可以在 JavaScript 执行之前生效。

Brendan

# 2013年6月12日

查看 conditionizr，它检测 IE10（并可以基于此提供服务）——有人知道它实际使用什么方法检测 IE10 吗？

Jon Humphrey

# 2013年6月12日

再次感谢 Chris 提供的绝佳技巧！:-D

快速提问：我是唯一一个发现自己如今越来越频繁地使用属性选择器的人吗？因为您可以在跨浏览器隔离各种元素，而无需专有铃铛和口哨声？

只是好奇其他人的使用情况和调查结果。

干杯！

Alan Shortis

# 2013年6月13日

我想看看这个在现实世界中的用例。我还没有在 IE10 中遇到任何会使这成为必需的情况，正如你所说，特性检测是一种更好的方法。

我实际上很惊讶你发布了这个，因为对 UA 探测的普遍态度是“永远不要；它不可靠”。

这是一种巧妙的做法，但我很好奇是否应该这样做。

艾伦·史密斯

# 2013年6月13日

不错的文章，但我们需要注意的主要问题是我们的网站应该在 IE 10 中完美运行。

马特·斯托

# 2013年6月13日

我写了一个名为 Layout Engine 的小型 JavaScript 插件，它可以检测 IE10 和所有其他类型的浏览器，并在 HTML 上提供一个类和一个 JS 对象供使用。

请查看这里：http://mattstow.com/layout-engine.html

里卡多·齐亚

# 2013年6月13日

好吧，我只是使用

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property:value; } }

迈克尔·麦圭尔

# 2013年6月13日

今天设置一个新的站点脚手架时，我决定使用此方法的一个变体，其中包含我在网络上四处搜索找到的几个不同的想法。这将浏览器作为类添加，如果它是 IE，则将版本作为 INT 添加。例如，IE-10 返回“[html class="MSIE-10" lang="en"]”，而 Chrome 返回“[html lang="en" class="Chrome"]”

function get_browser(){
    var N=navigator.appName, ua=navigator.userAgent, tem;
    var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
    return M[0];
}
function get_browser_version(){
    var N=navigator.appName, ua=navigator.userAgent, tem;
    var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
    return M[1];
}
var browser=get_browser();
if (browser=="MSIE") {
    browser += '-'+ parseInt(get_browser_version())
}

$('html').addClass(browser);

里卡多·齐亚

评论永久链接# 2013年6月14日

不确定为什么现在需要针对符合标准的浏览器，并且还要使用 JavaScript。

尽管如此，你这里的脚本很有趣，感谢你发布它。我将把它添加到我的工具箱中。

雨果·吉劳德尔

# 2013年6月13日

谢谢克里斯，我们会尽快尝试在 Browserhacks.com 上发布它。:)

菲利普·陶顿

# 2013年6月13日

在网页的任何部分放置完整的用户代理字符串时要非常小心。存在一个已知的安全漏洞，用户可以通过提供恶意用户代理字符串来实现站点的 XSS 攻击。解析用户代理字符串以查找已知值（例如“MSIE 10.0”）是一个更安全的选项。

李·科瓦尔科夫斯基

评论永久链接# 2013年6月23日

这是一个非常好的观点，你永远不应该将来自客户端的任何内容未经转义地放入你的 HTML 中。

本

# 2013年6月13日

我很想知道有多少 css-tricks 访客实际上看到了蓝色文本！我猜 90% 的人看到了黑色文本 :)

巴拉吉

# 2013年6月14日

嗯……现在对每个浏览器都起作用有多重要？

迈克尔·麦圭尔

评论永久链接# 2013年6月14日

我最近遇到一个问题，页面标题在 Chrome 中完美显示，但在 Firefox 中字体/文本太长而换行。如果我将其在 Firefox 中缩小，它在 Chrome 中看起来太短。有了这个，我可以为它们提供不同的字体大小。
同样，当你有可拖动的弹出窗口并且也有垂直滚动条时，Safari 存在一个奇怪的错误，点击滚动条会将弹出窗口粘贴到光标上，并且没有“鼠标抬起”事件。我可以在 Safari 中使弹出窗口不可拖动。
李·科瓦尔科夫斯基

评论永久链接# 2013年6月23日

像功能一样工作？极其。第一次使用你的损坏网站的用户可能不会尝试查看是否是他们的浏览器。

像像素完美/在每个浏览器中完全相同的渲染一样工作？徒劳的。你的网站用户可能浑然不觉它在不同的浏览器中看起来更好或更差。

亚当·斯托弗尔

# 2013年6月14日

顺便说一句，那个特定的字符串也会针对 Windows Phone 8：http://jonathanstark.com/blog/windows-phone-8-user-agent-string

里卡多·齐亚

评论永久链接# 2013年6月14日

好吧，据我所知，Windows Phone 从一开始就配备了 IE10。

戴维·斯托里

# 2013年6月14日

我理想主义的自我说“不要这样做”，因为在几乎所有情况下，你都不应该需要在现代浏览器上进行浏览器探测（这基本上就是这项技术的本质）。我认为 IE10 是一款现代浏览器。然而，我的务实的一面说“好的，这是一种巧妙的技术（我惊讶于它之前没有被想到），并且在非常特定的情况下，它*可能*成为武器库中的一件有用武器。”

但是，我不同意的是将此作为针对 IE10 的技术。*每个*浏览器都有一些难以解决的错误。只要浏览 Stackoverflow，你就会看到开发人员抱怨 xyz 东西在 Firefox 或 Opera 或其他浏览器中没有按预期工作。没有理由不能将此用于任何其他浏览器。对于任何现代（或旧的）浏览器，用例同样合法（或非法）。

我只会考虑在它实际上是一个错误（而不是说浏览器与你最喜欢的浏览器行为不同，因为你没有测试到最后，甚至可能是你最喜欢的浏览器有错——说真的，我见过有人抱怨除了他们最喜欢的浏览器之外的所有其他浏览器都是错误的帖子）并且没有其他方法可以解决此问题的情况下使用此技术。通常可以通过使用稍微不同的但同样有效的方法（而不是表现出错误行为的方法）来避免触发错误。对于许多浏览器（尤其是旧版 IE），错误是众所周知的，熟练的开发人员可以像经验丰富的扫雷高手一样避免它们。例如，IE10 不支持字体速记中的 rem 单位。这很容易解决。只需在速记之后再次定义字体大小，或完全避免使用速记（字体速记通常会重置你不希望重置的内容，例如行高）。

话虽如此，我更喜欢这种方法而不是使用 Media Query 技巧来定位 IE10。这种方法的好处在于它会在 IE11 中失效。MSIE 令牌未包含在内（至少目前是这样）。随着处于活跃开发中的浏览器修复其错误，如果你针对未来的浏览器，那么浏览器将因修复错误而受到惩罚，并可能导致失效。这很可能发生在 IE 特定的媒体功能技术中。使用此技术，选择器将不再匹配，并且不会提供解决方法。这当然会在 IE11 及更高版本中失效，如果错误未修复，但我认为必须重新审视、重新评估和维护你的技巧的方法比由于过去的违规行为而永远谴责浏览器更好。这就是为什么 UA 字符串变得像一首围绕避免不良探测的歌曲和舞蹈，以及像文档和浏览器模式切换这样的疯狂事物存在的原因。

因此，如果你真的*真的*必须使用它，在尝试了所有其他选项之后，但要谨慎行事，并记住，这对于任何浏览器都同样有效。IE10 并不是异类，也不是唯一需要技巧的浏览器。

里卡多·齐亚

评论永久链接# 2013年6月14日

从概念上讲你是正确的，这个原则/技术适用于任何浏览器。

但我必须说：我从未不得不使用任何技巧来专门针对 Firefox、Chrome 或 Opera。我曾经在很早以前 Safari 首次发布到 Windows 时为 Safari 做过一次（并在 Firefox 升级后一段时间后吸取了教训），但除此之外，对于符合标准的浏览器，没有使用任何技巧。

对于 IE……我必须说所有 IE，我们都有各种各样的技巧。

这引出了我的观点：从技术上讲，我不得不不同意你在这里描述的技术适用于任何浏览器。

我认为如果此技术有效，则仅对任何 IE 有效。

BestWPThemes

# 2013年6月15日

一直在寻找 IE10 特定的 CSS 技巧。感谢克里斯的提示！

瑞安

# 2013年6月16日

我想我将坚持在服务器上进行用户代理检查。

丹尼尔·洛·尼格罗

# 2013年6月17日

过去我使用过的方法是使用这样的 HTML 标签
使用这样的 <html> 标签

<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7 non-ie6"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8 non-ie6"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9 non-ie6"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="non-ie non-ie6">
<!--<![endif]-->

以及这样的 JavaScript 代码

// Based off James Padolsey's IE detection - http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
Util.IEVersion = (function () {
    var undef, v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
    while (div.innerHTML = '', all[0]);
    return v > 4 ? v : undef;
} ());

// IE 10 no longer supports conditional comments in HTML, but does support JavaScript conditional comments
// This will have to be revisited once IE 11 comes out... :(
if (/*@cc_on!@*/false && !Util.IEVersion) {
    Util.IEVersion = 10;
    document.documentElement.className = document.documentElement.className.replace('non-ie', 'ie ie10');
}

JavaScript 使用 Util.IEVersion 检查 IE 版本，CSS 使用 html.ie6 到 html.ie10。最后一段 JavaScript 代码做了一个假设——如果支持 JavaScript 条件注释，但不支持 HTML 条件注释，则浏览器必须是 IE 10。当然，这也会匹配未来的 IE 版本，直到删除 JavaScript 条件注释。

克里斯

# 2013年7月3日

当我尝试解决 IE10 难题时，我发现这篇文章对我有帮助

http://geekswithblogs.net/anirugu/archive/2013/03/02/how-to-write-css-only-for-internet-explorer–10.aspx

罗伯特

# 2013年7月16日

我使用 Joomla 作为我的 CMS 并且 IE 无法识别我的 CSS 时遇到了一个大问题。我尝试了几乎所有你的建议，但仍然没有成功。这是一个我重新设计以保持品牌一致性的单页。除了 IE 之外，在所有浏览器中看起来都很好。

拉凯什·朱亚尔

# 2013年7月18日

这确实是一种编写 IE10 特定 CSS 的巧妙方法，但肯定不是最好的方法。

马米克

# 2013年7月31日

感谢这个提示。它对我有用

杰拉尔德

# 2013年10月14日

感谢这篇文章，克里斯！这非常有帮助。

我正在使用上面的检测代码来处理这样一个事实：当使用 Modernizr 时，IE10 测试对 flexbox 支持为阳性……但并不完全支持 flexbox。

通过探测 IE10，我可以撤消由于“误报”Modernizr 测试而添加的 CSS flex 类。

当 IE10.1 发布时，或者其他浏览器也使用类似的超长字符串（例如 AMSIE 10.01），或者微软决定将 UA 字符串简单改为“IE 10.0”（在 IE11 泄露后就有这样的传闻），上述方法将不再适用。

我希望这段代码片段在某些东西发生变化或发布 IE 的新版本时失效并中断。如果并且当这种情况发生时，可能意味着 CSS3 flexbox 支持发生了变化。我只希望这段代码片段在当前 IE10 的“过渡”版本上起作用。

Chris S

# 2013年10月17日

感谢这篇文章！我之前没有想过使用这种方法来使用 CSS 缩小浏览器的范围。忽略那些唱反调的人。这仍然是一个很棒的方法。

Zulema

# 2013年10月23日

我可以确认这在 Windows Phone 8 上针对 IE10 生效。感谢发布这个宝石！

ScarLight

# 2013年11月20日

这在 IE 11 中不起作用。

Chris Stahl

评论永久链接# 2013年11月20日
该方法本身在 IE11 中仍然有效。但是，由于 IE 不再报告为 MSIE，因此需要以不同的方式进行检测。
```
html[data-useragent*='Trident/7.0'] h1 {
      color: blue;
    }
```
如此处所述。
里卡多·齐亚

评论永久链接# 2013年11月20日

虽然在技术上是可行的，但我认为我们不需要针对 IE11。

因此，正如 ScarLight 所说，这在 IE11 中不起作用……而这正是重点，它不应该起作用。

Jennifer

# 2013年11月20日

IE 10 不是一个很好的浏览器。一个非常好的浏览器在读取 css 代码时会像 Firefox 一样工作，而 IE 10 却没有做到这一点。
事实上，IE一直都存在 css 问题，这就是为什么一开始需要条件注释的原因。
现在去除条件注释只会让我们不得不编写更多代码，并且会让很多人浪费大量时间。

Marcel

# 2013年12月19日

你好！

不错的技巧……但这对 IE11.0 也适用吗？

我已经使用了

`@media screen and (-ms-high-contrast: active) (-ms-high-contrast: none) {}`

用于 IE10，但我有一些在 IE11.0 中为一些元素设置样式的问题。

干杯！

VZAN

# 2014年1月3日

嗨，Marcel，IE11 有一个修复方法，

使用上面相同的代码，

对于 JavaScript，

var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform);
alert(navigator.userAgent + "**********" + navigator.platform);

我测试过了，你会收到警报，在那里你可以看到“包含 rv:11 的 useragent 和 platform”

对于 css，使用此代码

html[data-useragent*=’rv:11.0′] h1 {
color: blue;
}

h1{
margin-top:50px;
margin-left:50px;
}

对我来说有效，希望对你也有效……

Alex

# 2014年4月27日

不确定是否是由于 Windows 8.1 IE 更新导致的。
这在我的 IE 10、11 版本中有效，您需要做的就是检查条件样式表并添加 ie8、ie9。

        if (document.documentMode===10){
            document.documentElement.className+=' ie10';
        }
        else if (document.documentMode===11){
            document.documentElement.className+=' ie11';
        }

Larry

# 2014年5月8日

我知道用户代理嗅探是不好的做法等等，但我有一个在进入 UAT 之前必须完成的截止日期，并且需要一个针对 IE 10 的快速修复。非常感谢 Chris！