判断区分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

网站设计总为这么些浏览器的兼容问题头痛
我做一个要兼容的小网页,光调试就要三天……可恶……ie家族、safria、opera、火狐、chrome……十分之痛苦啊
浏览器兼容问题真的是很囧
我现在都不是自己做,没那个能力,所以还没有头疼的问题。
加一个判断,在在不兼容的CSS标签中多弄几个就行了。
嘿嘿,我也来GAE玩玩了。发现还是GG浏览器好啊。
@蓝冰汗……刚才回复怎么出现错误了……
好东西,收藏了,这些是浏览器hack的写法?
@蓝冰
chrome留言是有些问题 现在还没解决 是徐明遗留下来的!如果不用ajax提交问题可以解决 但我还是坚持用ajax提交留言 另外,chrome用户是非常少 能留言的更是少了 暂时先不照顾chrome用户了!
貌似chrome提交出问题是评论js中的这句赋值语句:
[user,email,url]=commentuser.split('#@#');
我把它改成:
var tuple=commentuser.split('#@#');
var user,email,url;
user=tuple[0];
email=tuple[1];
url=tuple[2];
貌似就没问题了
@vvonder
试试去
太感谢了
请教个问题,你是怎么设置让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、、、
@floyd 其实他用的301
@floyd
mail.houkai.com 和 houkai.com 都是用的域名转向
@houkai
就是说如果没有一个国内的主机是不行的了?我以为你用的时代互联的服务实现的呢
我试了好久GoDaddy的Domain Fowarding,结果最后发现是被墙了。。。
地