如何仅对 IE 10 和 11 应用不同的 CSS 样式？答案

【问题标题】：How to apply different css style for IE 10 and 11 only?如何仅对 IE 10 和 11 应用不同的 CSS 样式？
【发布时间】：2016-05-13 13:50:23
【问题描述】：

目前，我在 Chrome、FF、IE9、IE10、IE11 和 Edge 上测试了我的 Web 应用程序样式。

除了在 IE10 和 IE11 上之外，一切都按我的预期工作。

我有适用于 Chrome、FF、Edge 的 common.css 文件。

然后我将它复制并重命名为 commonIE9.css。

然后在我的 layout.jspx 中，我将其应用如下：

<spring:url var="css_common" value="/resources/css/common.css"></spring:url>
<spring:url var="css_common_ie9" value="/resources/css/commonIE9.css"></spring:url>

（跳过）

<link rel="stylesheet" href="${css_common}"/>
&lt;&#33;&#45;&#45;[if IE 9]>
    <link rel="stylesheet" href="${css_common_ie9}"/>
&lt;&#33;[endif]-->

我使用那些 ASCII 码作为注释符号。 Credit to Mr. Colt from this post

所以，我成功地通过更改几个项目的宽度值使其在 IE9 中看起来相同。

但是，IE 10 和 11 不支持条件注释。

我尝试了一些技巧，例如

(-ms-high-contrast: active), (-ms-high-contrast: none)

但我必须为每个屏幕分辨率应用不同的值，如下所示：

@media only screen and (min-width: 1600px) {
    .header {overflow:hidden;width:100%;margin:0 auto;}
    .header .accTitle , .header .menu , .header .menuBtn {float: left;}
    .header .accTitle {width:270px;padding:10px;}  .header .menu  {width:1200px;} .header .menuBtn {width:10%;padding:5px 0;}
    .header .accTitle h2 {color:#2E75B6; font-size: 1.3em}
    .header .accTitle strong {font-size: 1.1em}

（跳过）

所以我不确定我是否可以使用上面的 hack，因为看起来我无法改变它的宽度条件。

我看到reset.css 并尝试过。通过重置我设置的所有样式，它使 IE10/11 和最后一个看起来相同，所以我不想使用它，或者至少想弄清楚如何保留我的 css。

我的屏幕是这样的

铬：

FF:

IE9：

IE10：

编辑

我做了如下改变：

layout.jspx

<spring:url var="js_test" value="/resources/js/test.js"></spring:url>
<script type="text/javascript" src="${js_test}"><jsp:text /></script>

test.js

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);

common.css

.noticeSearchButton { width: 100px; padding: 6px 0 0 100px; }
html[data-useragent*='MSIE 10.0'] .noticeSearchButton { width: 100px; padding: 6px 0 0 80px; }

我创建了新的 js 文件，然后添加了用户代理，如 Arsen Babajanyan 所说。

然后在css中，复制我必须根据浏览器不同的元素，并在其前面添加html[data-useragent*='MSIE 10.0']。

仅供参考，对于 IE 11，您应该使用 html[data-useragent*='rv:11.0']。

感谢你们今天的帮助。

【问题讨论】：

您使用的是哪种编程语言，如 PHP 或 .Net ？
检查stackoverflow.com/questions/1373029/…提供的答案可能会对您有所帮助。
那么您的建议是使用脚本获取有关用户浏览器的信息，然后调用 css 文件取决于浏览器，对吧？
是的，您需要在脚本返回的浏览器详细信息的基础上添加两个不同的 css 文件，例如 IE10.css 和 IE11.css，然后添加 css 属性以将其覆盖到您的主 css 文件中财产。

标签： html css jsp

【解决方案1】：

使用少量 JavaScript 将用户代理添加到 <html> 元素：

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10 的用户代理字符串是：

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

这将导致：

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

然后你可以像这样设置样式：

html[data-useragent*='MSIE 10.0'] h1 {
    color: blue;
}

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

// IE 10 == Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

h1 {
  text-align: center;
  padding: 20px;
}

&lt;h1&gt;I'll be blue in IE 10 and black in everything else.&lt;/h1&gt;

【讨论】：

请问我应该如何开始？我不确定我是否了解如何在我的 jspx 文件中实现 JavaScript。我应该像下面的第一个人那样做吗？ stackoverflow.com/questions/968800/…
我只是添加了名为 test.js 的临时文件并添加了 , 在我的 jspx 文件中。现在我要试试你们提供的javascript代码。