Question

目前，我在Chrome，FF，IE9，IE10，IE11和Edge上测试了我的网络应用程序风格。

除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>

（SKIP）

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

（SKIP）

所以我不确定我是否可以使用上面的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']。

感谢您今天帮助我们。

Answer 1

使用一小段JavaScript将用户代理添加到var doc = document.documentElement; doc.setAttribute('data-useragent', navigator.userAgent);元素：

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

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

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

<h1>I'll be blue in IE 10 and black in everything else.</h1>

{{1}}

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

1 个答案: