在css中判断浏览器类型的5大方法盘点-优米格

为了更好的保证页面渲染效果在各个浏览器上能够正常，我们可能会对浏览器进行判断，这里提供了几种检查浏览器是否是IE浏览器的方法！

条件性注释(Conditional comments)

条件性注释只对IE浏览器起作用，而且对版本也有要求，从IE 10起不再支持条件注释详见官方说明。

在旧版的IE浏览器（IE 5 ~ IE 9）中，一些条件性注释（Conditional comments）是让你的页面能够正常展示的最好方式。

下面是条件性注释的一般用法：

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->

<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->

<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->

<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->

<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->

<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->

<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->

说明：

gt: 大于指定版本；
lte: 小于或等于指定版本；
!IE：不是IE浏览器；

使用IE=EmulateIE9

上面已经说过了，条件性注释适用的IE浏览器版本为IE 5~9 ，因此在比较高的版本中，我们可以使用下面的语法指定浏览器使用IE 9进行渲染，这样我们就可以使用条件性注释了：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

没错，这样有个显著的弊端，就是不能使用最新的IE 10/11技术了！

使用媒体查询语句+-ms-high-contrast属性

在比较高版本的IE浏览器中，有时你会发现虽然IE已经尽力跟其他高级浏览器入chrome等保持一致了，但是还是有不尽如人意的地方，我们可以使用CSS的媒体查询语句(media query)来判断CSS是否生效。CSS的媒体查询语句(media query)是一种高级的CSS条件语句，在这里，我们要使用一个IE10/11独有的属性，它就是-ms-high-contrast，只有IE10/11实现了这个属性，它可以有两个值active或none，使用下面的媒体查询语句：

/* Target IE 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  p {
    color: red;
  }
}

火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行的效果。

类似的CSS的媒体查询语句(media query)还有：

<!-- Target Safari and Chrome -->

@media screen and (-webkit-min-device-pixel-ratio:0) {
  p {
    color: red;
  }
}

<!-- Target Firefox -->

@-moz-document url-prefix() {
  p {
    color: red;
  }
}

<!-- Target Opera -->

x:-o-prefocus, p {
  color: red;
}

使用Javascript判断浏览器的类型

先用JavaSCript判断是否是IE浏览器，如果是，就在页面的<html>标记上添加一个“ie”的类名：

var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');

if ((old_ie > -1) || (new_ie > -1)) {
    ms_ie = true;
}

if ( ms_ie ) {
   document.documentElement.className += " ie";
}

有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。

.testClass{
    /*这里写通用的css*/ 
}

.ie .testClass{
    /*这里写专门针对IE的css*/
}

在比较低的IE浏览器中

p {
  color: red; /* All browsers */
  color: red\9; /* IE8 and below */
  *color: red; /* IE7 and below */
  _color: red; /* IE6 */
}

参考文章：

在css中判断浏览器类型的5大方法盘点

条件性注释(Conditional comments)

使用IE=EmulateIE9

使用媒体查询语句+-ms-high-contrast属性

使用Javascript判断浏览器的类型

在比较低的IE浏览器中

评论抢沙发

最新评论

合作&反馈&投稿

商务合作、问题反馈、投稿，欢迎联系

切换注册登录

切换登录注册

条件性注释(Conditional comments)

使用IE=EmulateIE9

使用媒体查询语句+-ms-high-contrast属性

使用Javascript判断浏览器的类型

在比较低的IE浏览器中

评论 抢沙发

最新评论

合作&反馈&投稿

商务合作、问题反馈、投稿，欢迎联系

切换注册登录

切换登录注册

评论抢沙发