判断区分IE6 IE7 firefox等浏览器类型的代码

在各浏览器要保持网页效果一样,还真是个头疼的问题,而且问题相当的多,这里总结最重要的一小部分。

在CSS文件中如何判断浏览器是Firefox、IE6、IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>关于用CSS区分Firefox、IE6、IE7</title>
<style type="text/css">
#example{color:red ;}/*firefox*/
* html #example{color:blue;}/*ie6*/
*+html #example{color:green;}/*ie7*/
</style>
</head>
<body>
<div id="example">在FireFox下应为红色,在IE6.0下应为蓝色,在IE7.0下应为绿色。</div>
</body>

复制上面代码保存为html文件,在分别在firefox、IE6、IE7打开看看文字的颜色。

例如本站评论的回复@,在ie7、火狐下鼠标进入某个评论区域会自动显示出来,在ie6下就显示不出来了 可以这样解决此问题

.one_replyTo {visibility: hidden}
* html .one_replyTo{visibility: visible}/*ie6*/
#comments LI:hover .one_replyTo {visibility: visible}
#comments OL LI:hover .one_replyTo {visibility: visible}

如果当前浏览器是ie6就直接显示。

有的情况下也可以不指明浏览器类型也能达到相同的目的 如在网页被连续性英文字符或图片撑破的解决办法所使用的代码

body {
font: 12px/18px Verdana, Helvetica, Arial, Geneva, sans-serif;
color: #333;
background: #728776 url(http://hou-kai.appspot.com/themes/Devart/images/bg.gif) repeat-x;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

white-space针对火狐,word-wrap针对IE和chrome

再看看如何在html中判断IE浏览器类型,以下用本站所使用代码,来举例说明:

<!–[if IE]><link rel="stylesheet" type="text/css" href="/themes/Devart/ie.css" media="screen" /><![endif]–>

这个表示如果当前打开此网页的浏览器是ie就加载ie.css。ie.css里面是放置的是为了确保页面显示效果在不同浏览器相似,而针对ie的css代码

<!–[if lt IE 7]><script defer type="text/javascript" src="/themes/Devart/MSIEPNG.js"></script><![endif]–>

这个表示如果当前浏览器低于ie7就调用此js,这个是解决在ie6下png透明背景不透明的问题。

<!–[if gt IE 6]><DIV class=b2t></DIV><DIV class=g2b></DIV><![endif]–>

这个是本站右下方快速到顶部和快速到底部的浮动层,但在ie6下就不能浮动了,如果当前浏览器版本高于ie6就执行此html代码。

从这几个例子可以推广到ie5 ie5.5 ie8。其中类似于lt和gt的判断词汇如下:

lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同

也可以用导入的办法调用 代码如下

<!–[if lte IE 6]> 
<STYLE type=text/css media=screen>@import url( ie6.css );  
</STYLE> 
<![endif]–> 
<!–[if gte IE 7]> 
<style type="text/css" media="screen"> 
/* <![CDATA[ */ @import url(ie7.css); /* ]]> */  
</style> 
<![endif]–>

有时ie7显示没问题 火狐有点问题 等解决了火狐的问题(像首页链接的分栏),发现chorme有问题(@的js代码放在js文件中chrome就不起作用了)。以为都没问题了 但某天在别人的ie6上又发现问题了(快速回到顶部浮动层等)。

发布者

Zmsky

http://xloli.net/?page_id=11

《判断区分IE6 IE7 firefox等浏览器类型的代码》上有5条评论

  1. 你的表情怎么不跟灵曦一样换上淫荡的?
    回复@ CHROME木有显示呢,另外你的兼容方案咋这么诡异呢 iE7 和 ff

发表评论