Deprecated: Function create_function() is deprecated in /www/wwwroot/cn09.com/wp-load.php on line 2
在HTML,jQuery和css中判断浏览器版本 | 在HTML,jQuery和css中判断浏览器版本 – 第九区

第九区

一个程序员的经验笔记

在HTML,jQuery和css中判断浏览器版本

| 暂无评论

在HTML中判断浏览器版本,有个很常用的命令:

<!--[if lt IE 6]>

我想大多数人都是用过了。但是今天用得稍复杂了一点,却发现很多网站提及这一命令时概念不清,没有表述清楚三个基本要点,容易产生误导。

第一点,这其实是一个只有IE浏览器才支持的语句,在别的浏览器眼中,这其实只是一行注释。也就是说,它只能判断IE的版本,而无法判断其它浏览器的版本;

第二点:很多博文都没有写清楚lt和lte的区别,lt是小于,lte是小于等于,同理,gt是大于,gte是大于等于

第三点:if !ie的写法和其它几个判断有细微的差异。!ie的意思是只有非IE的浏览器才运行,根据刚才提到的第一点,我们要把这个判断前后注释起来,这样非IE的浏览器就只看到了要加载的语句,而把这个判断命令当成注释,只有IE浏览器才会去识别它从而拒绝加载中间的语句。

根据以上三点,我罗列一下这系列的命令:

<!--[if !IE]>-->除IE外都可以识别<!--<![endif]-->
<!--[if IE]> 所有的IE浏览器可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 6]> IE6以上版本都可以识别,IE6不识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别,IE6不可识别<![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

这样应该清楚多了吧。

 

另外,在javascript里,可以通过navigator进行全部的浏览器类型判断,jQquery更是大大简化了判断的命令:

$(function() { 
if($.browser.msie) { 
alert("this is msie"); 
} 
else if($.browser.safari) 
{ 
alert("this is safari!"); 
} 
else if($.browser.mozilla) 
{ 
alert("this is mozilla!"); 
} 
else if($.browser.opera) { 
alert("this is opera"); 
} 
else { 
alert("i don't konw!"); 
}

jQuery甚至还可以获取所有浏览器的版本:

var version=$.browser.version;
alert(version);

CSS没有专门的判断命令,所以我们通过一些浏览器特性来判断其版本,这些方法国外称为hack,通常我们翻译为招数:

星号HTML招数
最著名且最有用的CSS过滤器之一是星号HTML招数。它可以指定IE7和更低版本。HTML元素是网页的根元素。但是IE的所有当前版本有一个匿名的根元素,它包围着HTML元素。可以使用通用选择器指定包围在另外一个元素中的HTML元素。因为这种情况只在IE7和更低版本中出现,所以将特定的规则应用于这些浏览器。

a:hover {
  border: 1px dotted black;
}
/* for <= ie7 */
* html a:hover {
  border-style: solid;
}

下划线HTML招数
虽然很多网站上提到星号HTML招数时说的都是IE6,但实际上,IE7也是支持*的,所以如果要区分IE6和IE7,就要使用下划线招数。

a:hover {
  border: 1px dotted black;
}
/* for <= ie6 */
_html a:hover {
  border-style: solid;
}

*+招数
*+招数是ie7所独有的,只有ie7才会识别

*+html { 
  font-size:small 
}

 

子选择器招数
Windows上的IE6和更低版本不支持子选择器,所以可以使用它对这些浏览器隐藏规则。确保子选择器前后没有空格。

html>body {
  background-image: url("bg.png");
}

 

属性选择器招数
许多现代浏览器支持属性选择器,但是IE6和更低版本不支持它。

div[id="content"] {
    background-image: url("bg.png");
}

!important招数
IE6和更低版本不识别!important。

div {
    background-color:red !important;
    background-color:black;
}

 

 

发表评论

*为必填字段!