1、解决 css 和 js 针对不同浏览器兼容的问题Firefox 浏览器良好支持 W3C 标准，是目前对 CSS 支持最好的浏览器，而 ie 是出现的比较早，在 w3c 支持方面做的一直不是很好，所以两种浏览器在很多方面不尽相同。下面总结一下这两种浏览器的兼容问题：1.集合类对象问题说明:IE 下,可以使用()或获取集合类对象;Firefox 下,只能使用 获取集合类对象. 解决方法:统一使用获取集合类对象 .2.HTML 对象获取问题FireFox：document.getElementById(“idName“);ie:document.idname 或者 document.getEleme
2、ntById(“idName“).解决办法：统一使用 document.getElementById(“idName“);3.const 问题说明:Firefox 下,可以使用 const 关键字或 var 关键字来定义常量;IE 下,只能使用 var 关键字来定义常量 . 解决方法:统一使用 var 关键字来定义常量.4.window.event 问题说明:window.event 只能在 IE 下运行,而不能在 Firefox 下运行,这是因为 Firefox的 event 只能在事件发生的现场使用. Firefox 必须从源处加入 event 作参数传递。Ie 忽略该参数，用 windo
3、w.event 来读取该 event。解决方法: 以下为引用的内容：IE 5.event.x 与 event.y 问题说明:IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;Firefox 下,even 对象有 pageX,pageY 属性,但是没有 x,y 属性. 解决方法:使用 mX(mX = event.x ? event.x : event.pageX;)来代替 IE 下的event.x 或者 Firefox 下的 event.pageX. 6.event.srcElement 问题说明:IE 下,event 对象有 srcElement 属性,但是没有
4、 target 属性;Firefox 下,even 对象有 target 属性,但是没有 srcElement 属性. 解 决方法:使用 obj(obj = event.srcElement ? event.srcElement : event.target;)来代替 IE 下的 event.srcElement 或者 Firefox 下的 event.target. 请同时注意event 的兼容性问题。7.window.location.href 问题说明:IE 或者 Firefox2.0.x 下,可以使用 window.location 或 window.location.href;Fir
5、efox1.5.x 下 ,只能使用 window.location. 解决方法:使用 window.location 来代替 window.location.href. 8.模态和非模态窗口问题说明:IE 下,可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口;Firefox 下则不能. 解决方法:直接使用 window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用 window.opener来访问父窗口. 例如：var parWin = window.o
6、pener; parWin.document.getElementById(“Aqing“).value = “Aqing“; 9.frame 问题以下面的 frame 为例：(1)访问 frame 对象:IE:使用 window.frameId 或者 window.frameName 来访问这个 frame 对象. frameId 和 frameName 可以同名。Firefox:只能使用 window.frameName 来访问这个 frame 对象.另外，在 IE 和 Firefox 中都可以使用window.document.getElementById(“frameId“)来访问这个
7、 frame 对象.(2)切换 frame 内容:在 IE 和 Firefox 中都可以使用 window.document.getElementById(“testFrame“).src = “xxx.html“或 window.frameName.location = “xxx.html“来切换 frame 的内容.如果需要将 frame 中的参数传回父窗口(注意不是 opener,而是 parent frame)，可以在 frame 中使用 parent 来访问父窗口。例如：parent.document.form1.filename.value=“Aqing“;10.body 问题Fi
8、refox 的 body 在 body 标签没有被浏览器完全读入之前就存在；而 IE 的 body则必须在 body 标签被浏览器完全读入之后才存在. 11. 事件委托方法IE：document.body.onload = inject; /Function inject()在这之前已被实现Firefox：document.body.onload = inject(); 12. firefox 与 IE 的父元素(parentElement)的区别IE：obj.parentElementfirefox：obj.parentNode解决方法: 因为 firefox 与 IE 都支持 DOM,因此
9、使用 obj.parentNode 是不错选择.13.cursor:hand VS cursor:pointer firefox 不支持 hand，但 ie 支持 pointer解决方法: 统一使用 pointer14.innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行. 需用textContent。解决方法:以下为引用的内容：if(navigator.appName.indexOf(“Explorer“) -1)document.getElementById(element).innerText = “my text“; elsedocumen
10、t.getElementById(element).textContent = “my text“;15. FireFox 中设置 HTML 标签的 style 时，所有位置性和字体尺寸的值必须后跟 px。这个 ie 也是支持的。16. ie,firefox 以及其它浏览器对于 table 标签的操作都各不相同，在 ie 中不允许对 table 和 tr 的 innerHTML 赋值，使用 js 增加一个 tr 时，使用appendChild 方法也不管用。解决方法：以下为引用的内容：/向 table 追加一个空行：var row = otable.insertRow(-1);var cell
11、 = document.createElement(“td“);cell.innerHTML = “ “; cell.className = “XXXX“; row.appendChild(cell);17. padding 问题padding 5px 4px 3px 1px FireFox 无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;18. 消除 ul、 ol 等列表的缩进时样式应写成:list-style:none;margin:0px;padding:0px;其中
12、 margin 属性对 IE 有效， padding 属性对 FireFox 有效19. CSS 透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 20. CSS 圆角IE：不支持圆角。 FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-rad
13、ius- bottomright:4px;。21. CSS 双线凹凸边框IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;22. 对 select 的 options 集合操作枚 举元素除了外，SelectName.options.item() 也是可以的, 另外Select
14、Name.options.length, SelectName.options.add/remove 都可以在两种浏览器上使用。注意在 add 后赋值元素，否则会失败。23. XMLHTTP 的区别以下为引用的内容：/mfif (window.XMLHttpRequest) /mfxmlhttp=new XMLHttpRequest()xmlhttp.onreadystatechange=xmlhttpChangexmlhttp.open(“GET“,url,true)xmlhttp.send(null)/ieelse if (window.ActiveXObject) / code for
15、IExmlhttp=new ActiveXObject(“Microsoft.XMLHTTP“)if (xmlhttp)xmlhttp.onreadystatechange=xmlhttpChangexmlhttp.open(“GET“,url,true)xmlhttp.send()24.css 中的 width 和 padding在 IE7 和 FF 中 width 宽度不包括 padding，在 Ie6 中包括 padding.25.css hack根 据不同浏览器对 CSS 样式的支持程度，解析结果和识别 CSS 的优先级不同，设计师们就可以根据这些不同浏览器 的特点来书写不同的 CSS
16、 样式代码。IE6能识别下划线_和星号*，IE7 能识别星号*，不能识别下划线_，而 firefox 两个都不能识别，如此，就可 以针对 IE6.IE7 和 FF 通过对这些特殊符号的使用写不同的代码了。 以下为引用的内容：divbackground:green; /* for FireFox */*background:red; /* for IE7 */_background:blue; /* for IE6 */该样式显示的效果是：在 FireFox 中背景色为 green；在 IE7 中背景色为 red；在IE6 中背景色为 blue。此外，!important 声明也可以很好地提升指
17、定样式规则的应用优先权。在 IE6和 FF 中用!important 声明可以提高优先级别，但在 IE6 中 的!important 声明会被之后的同名属性定义替换。所以，通过*和!important 声明两者的搭配也可以很好地解决 IE6，IE7 和 FF 三者之 间的兼容性问题。区别 FF，IE7 ，IE6：background:red; *background:green !important; *background:blue;注：IE 都能识别 *;FF 不能识别*；IE6 能识别*，但不能识别 !important；IE7 能识别*，也能识别!important;FF 不能识别*，
18、但能识别!important;针对 IE7/firefox 在 css 的前面加 xmlns, 如下面的 left 属性，如果我想要只针对IE7/firefox 起作用，写法如下：以下为引用的内容：xmlns #left float:left;border:4px solid #999;padding:5px;width:200px;height:200px;只针对 IE6 起作用，可以在 css 前面加* html,如: 以下为引用的内容：* html #left clear:both; 只针对 IE7 起作用，在 css 里前面加*+html, 如: 以下为引用的内容：*+html #le
19、ft clear:both;书写的顺序都是 FireFox 的写在前面，IE7 的写在中间， IE6 的写在最后面。26.使用 IE 专用的条件注释 以下为引用的内容：27.div 的垂直居中问题 : vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行28.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以29.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
20、参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位 , 若不设 height, 可以在 menubar 中插入一个空格。30.在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：divmargin:30px!important;margin:28px;注意这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;31.IE5 和 IE6 的 BOX 解释不一致IE5 下 divwidth:300px;margin:0 10px 0 10px;div 的宽度会被解释为 300px-10px(右填充)-10px(左填充)最终 div 的宽度为280px，而在 IE6 和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px 来计算的。这时我们可以做如下修改 divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px
