针对IE10的CSS Hack（User-agent方法）

在IE6/IE7/IE8的时候，为了解决网页在IE浏览器下的兼容性，我们会经常用到针对IE浏览器的条件注释来解决问题。延续这个思维模式，当我们发现页面在IE10中表现不正常了，又不能忽略不管，所以有些人惯性思维想到的方法就是针对IE10写一个条件注释。值得高兴的是，在IE10里已无需使用条件注释。 如果我想针对IE10单独定义一个CSS样式，这个应该如何解决呢？ 对此，国外开发者Roge在前段时间提出了一个非常简单地想法，并且能够很好地工作。那就是利用User-agent的方式实现针对IE10的CSS Hack。 JavaScript

var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

IE10用户代理字符串

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

HTML

CSS样式

html[data-useragent*='MSIE 10.0'] h1 {

  color: blue;

}

示例 HTML代码：

在IE10浏览器中打开是蓝色的，其他浏览器则是别的颜色。

CSS代码：

html[data-useragent*='MSIE 10.0'] strong {

  color: blue;

}

strong {

  text-align: center;

  padding: 20px;

}

JavaScript代码：

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).

结果： 如果你是一个前端开发人员的话，正确的了解和使用CSS Hack是一个必须的技能。相信作为前端开发的你，一定需要把这个方法添加到你的开发书签中噢！

标签:CSSUser-agentIE10IE Web