跨浏览器开发总结

一:页面上所有document.all,修改为:document.getElementById(),document.getElementsByTagName()

      document.all只有IE认识,其他浏览器不认识。

二:innerText全部改为innerHTML(innerHTML大小写必须这样,否则火狐浏览器不认识)

      innerText只有IE认识

 

三:在IE显示正常,其他浏览器边框撑开了外边框,把里面边框的width:100%或者width:798px删除。

 

四:把鼠标放在图片上,一般会有一个注释,一般都用alt="calendar",其实这是一个误解,应该用title="calendar",alt表示的意思是当图片找不到会显示alt里面的内容,而title表示图片的注释。只是IE在没有title标签的情况下,会把alt里面的内容显示出来。

 

五:边距问题。如果页面是用table做的,有些边距只在IE中有效,那么可能是这样写的:<tr style="padding:5px 0;">,只要把style定义到td里面就可以了。

 

六:判断浏览器:

1 在服务器端(java代码)判断:

String userAgent=request.getHeader("User_Agent");

String isIE = (userAgent.indexOf("MSIE")>-1)?"Y":"N";

String isFirefox = (userAgent.indexOf("FireFox")>-1)?"Y":"N";

String isOpera = (userAgent.indexOf("Opera")>-1)?"Y":"N";

2 客户端(js)判断:

document.all,只有IE可以识别,可以当做判断是否是IE的标志

3 在css中判断

!important除了IE6,IE7不识别外,其他浏览器都识别

/9只有IE8浏览器识别

例如:需要定义IE浏览器width:20px,其他浏览器25px。可以这样写

width:25px !important;

width:20px;

样式一般是最后一个定义的有效,但是非IE浏览器会对!important优先解释

 

七:如果IE显示正常,但是在火狐下确基本上没有什么样式,可以试一下是否是DocType的问题,可以判断一下如果是IE,doctype就留着,如果不是IE则不要doctype。

 

八:手形问题。在IE下,用cursor:hand,可以实现鼠标放在图片上出现手形,firefox不可以,可以用cursor:pointer代替cursor:hand.

 

九:div错位问题。IE下各个div块显示正常,但是在firefox却错位,可以试一下,style="clear:both";

   

 

十:跨浏览器开发一般是已经有一套在IE下显示正常的页面,开发的流程是这样的:先让页面在firefox下运行正常,可以用firefox的firebug辅助调试(这个工具非常好用),firefox正常后,然后再看一下是否在IE下正常,这时候IE8的问题可能会多一些,(可以用IE8的调试工具,点击F12就可以出现,和firebug类似)最后在调试其他浏览器opera,safari,google,一般IE和firefox正常显示后,这3个浏览的问题就很少了,可能有些地方需要微调。

 

阅读更多

没有更多推荐了,返回首页