跨浏览器开发总结

一：页面上所有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个浏览的问题就很少了，可能有些地方需要微调。