IE web开发相关针对IE10的CSS Hack（User-agent方法）

http://www.iefans.net/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).
结果：

IE10 CSS Hack  测试结果

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

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址：http://www.iefans.net/ie10-css-hack-user-agent/ 作者：ief