欢迎光临
一个有态度、有温度的分享型博客

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

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

条件性注释(Conditional comments)

条件性注释只对IE浏览器起作用,而且对版本也有要求,从IE 10起不再支持条件注释[详见官方说明(https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx)]。

在旧版的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浏览器,如果是,就在页面的标记上添加一个“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 */
}

参考文章:

1.Conditional comments

2.IE10/11不支持条件性注释后的替代方法

3.CSS 判断浏览器方法整理

转载请注明出处:容休博客 » 在css中判断浏览器类型的5大方法盘点

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址