判断区分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上又发现问题了(快速回到顶部浮动层等)。

本文永久链接  http://www.houkai.com/2009/10/10/codeforbrowser.html
转载注明来自  HOUKAI.COM 分享家:Addthis中国

显卡型号中丽台(Leadtek)与NVIDIA的区别和关系»

«手机屏幕VGA QVGA HVGA WVGA区别




最新文章

您可能会喜欢

本文共有16评论

  1. 网站设计总为这么些浏览器的兼容问题头痛

  2. 我做一个要兼容的小网页,光调试就要三天……可恶……ie家族、safria、opera、火狐、chrome……十分之痛苦啊

  3. 浏览器兼容问题真的是很囧

  4. 我现在都不是自己做,没那个能力,所以还没有头疼的问题。Big grin

  5. 加一个判断,在在不兼容的CSS标签中多弄几个就行了。

  6. 嘿嘿,我也来GAE玩玩了。发现还是GG浏览器好啊。

  7. @蓝冰汗……刚才回复怎么出现错误了……

  8. 好东西,收藏了,这些是浏览器hack的写法?

  9. @蓝冰
    chrome留言是有些问题 现在还没解决 是徐明遗留下来的!如果不用ajax提交问题可以解决 但我还是坚持用ajax提交留言 另外,chrome用户是非常少 能留言的更是少了 暂时先不照顾chrome用户了!Tongue

  10. 貌似chrome提交出问题是评论js中的这句赋值语句:
    [user,email,url]=commentuser.split('#@#');
    我把它改成:
    var tuple=commentuser.split('#@#');
    var user,email,url;
    user=tuple[0];
    email=tuple[1];
    url=tuple[2];
    貌似就没问题了

  11. @vvonder
    太感谢了 Titter   试试去

  12. 请教个问题,你是怎么设置让houkai.com重定向的www.houkai.com的?我用的Godaddy的URL转发似乎被墙了。。。
    还有就是我用nslookup 你的mail.houkai.com
    发现你似乎不是用A记录或者Cname的?
    实在是搞不懂你是怎么设置的,可否讲解一下?
    nslookup -qt=a houkai.com 168.95.1.1
    Server:  dns.hinet.net
    Address:  168.95.1.1
    Name:    houkai.com
    Address:  218.5.74.111
    这个应该是URL转发的服务器?
    nslookup -qt=aaaa mail.houkai.com 168.95.1.1
    Server:  dns.hinet.net
    Address:  168.95.1.1
    houkai.com
            primary name server = (root)
            responsible mail addr = hostmaster.nameserver
            serial  = 272
            refresh = 28800 (8 hours)
            retry   = 7200 (2 hours)
            expire  = 604800 (7 days)
            default TTL = 5 (5 secs)
    这个没看到canonical name。。。那是怎么定向到可用的IP的呢。。。
    nslookup -qt=a mail.houkai.com 168.95.1.1
    Server:  dns.hinet.net
    Address:  168.95.1.1
    Name:    mail.houkai.com
    Address:  218.5.74.111
    这个查到的IP还是218.5.74.111、、、

  13. @floyd  其实他用的301

  14. @floyd
    mail.houkai.com 和 houkai.com 都是用的域名转向

  15. @houkai
    就是说如果没有一个国内的主机是不行的了?我以为你用的时代互联的服务实现的呢
    我试了好久GoDaddy的Domain Fowarding,结果最后发现是被墙了。。。

 

现在评论本文

8+10