浏览器兼容性小记-DOM篇(一)

1、childNodes引入空白节点问题:使用childElementCount或children

2、innerText: FF中不支持该属性,使用textContent代替

3、变量名与某HTML对象id相同时,引用该变量只会取得id名与其相同的html对象(ie8-);声明变量时前面一律加上var,尽量避免id名与变量名相同

4、为ele.style.property赋值时一律带上单位:e.style.height= 34 + ‘px’

5、禁止选择网页内容:

//IE
document.onSelectStart = function(){
return false;
}
//FF
-moz-user-select: none;
//Chrome
-webkit-user-select: none;

6、访问form中的元素:ff只支持document.formName.elements[‘elementName‘]的方式,ie下可以使用document.formName.item(‘name‘);统一使用elements的方式;凡是遇到集合类对象(NodeCollection、NodeList)一律使用collection[‘name‘]的方式

7、自定义html元素特性问题:IE下可以使用e.selfAttr =
variable/e.selfAttr方式来设值和取值,FF中只能使用e.setAttribute(attr,
value)/e.getAttribute(‘attr‘)方式

8、input元素的type特性问题:IE下该属性是只读的,FF中可以动态设置;一律不能修改,若需要修改则删除原来元素,重新创建新元素

9、window.location.href问题:就浏览器可以通过这种方式来获取当前页面url;应当统一使用window.location来方位页面url,如:location.hostname,location.port,location.pathname

10、在浏览器中打开新窗口问题:

//子窗口通过window.opener方式来访问父窗口,父窗口通过parentWin来控制子窗口
parentWin = window.open(url, name, properties);

11、body载入问题:FF中的body对象在body标签为载入完全时即可访问,IE下必须完全读入后才执行

12、function、new function(){}、new Function(‘.....‘)三者的区别

13、FF中不支持e.parentElement方式方位父元素,只能使用e.parentNode方式

14、Table操作问题,IE中无法使用innerHTML方式对table和tr进行操作;一般方法是借助js类库,将innerHLML转化为dom节点,并插入到tbody下

15、IE下不支持使用e.setAttribute方式来整体设值style属性问题:同时使用e.setAttribute(‘style‘,
‘.......‘)和e.style.cssText = ‘。。。。。。。’方式来设置

16、document.createElement(‘<div
class="name"></div>‘)方式创建html元素在FF中不支持

//IE
document.createElement("<input type=‘radio‘>");
//FF
var ipt = document.createElement(‘input‘);
ipt.type = "radio";

17、iframe问题:

<iframe src="xxx.html" id="frameId" name="frameName" />

IE
中可以通过window.top.frmaeId或window.top.frameName方式来访问farme;FF中只支持第二种方式;IE在iframe资源未加载完成时无法访问iframe.contentWindow对象

18、url encoding
问题:encodeURIComponent适用于对url后的参数编码、encodeURI:主要用于location对象跳转时对整个url编码

19、节点插入问题:IE:insertAdjacentElement(position,src);FF:insertBefore(src,
ref)

20、IE9以下不能访问html元素的构造器,如判断元素是否为HTMLElement方法只能使用:e.nodeType === 1不能使用 e
instanceof HTMLElement方式

浏览器兼容性小记-DOM篇(一),布布扣,bubuko.com

时间: 2024-08-24 10:45:19

浏览器兼容性小记-DOM篇(一)的相关文章

浏览器兼容性小记-DOM篇(二)

1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: 1 Node.ELEMENT_NODE 2 Node.ATTRIBUTE_NODE 3 Node.TEXT_NODE 4 Node.CDATA_SECTION_NODE 5 Node.ENTITY_REFERENCE_NODE 6 Node.ENTITY_NODE 7 Node.PROCESSING_INSTRUCTION_NODE

多浏览器兼容性问题及解决方案之Javascript篇

CSS跟JavaScript开发中,最令大家头疼的问题就是浏览器兼容性了,虽然很多文章有这方面的文章,但依然让很多开发人员晕头转向,而且也不够全面.这篇文章,将全面收集css和javascript在各种浏览器下的兼容性报告,也期待各位不断补充. 由于发觉内容收集越来越多,决定将CSS跟JavaScript分开. 一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 do

浏览器兼容性-JS篇

总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: 1 function add(obj,event){ 2 if (obj.addEventListener) { 3 obj.addEventListener(event,fn,fase); 4 }else{ 5 obj.attachEvent("on"+event,fn); 6 } 7 } 小结:addEventListener()兼容firefox.chrome.safari.opera.IE9+ att

常见浏览器兼容性问题与解决方案css篇

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

常见的浏览器兼容性问题与解决方案——CSS篇

1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{margin:0;padding:0}.也可以使用其他网站的初始化代码. 备注:这个是最常见的也是最容易解决的一个浏览器兼容性问题. 2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见的是IE6中后面的一块被顶到下一行. 碰到频率:90% 解

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

IE浏览器兼容性模式

最近支持公司的一个内部业务管理系统,系统是基于jQuery来实现:用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统,真是相当不爽(相信用过MVVM框架的跟我是相同的感受):更为憋屈的是,到了这个年代,IE的亲爹微软都放弃支持IE6-10了,系统尽然还只支持使用IE浏览器(运营电脑安装都是IE8浏览器,所以大部分只管IE8),其他高级浏览器不被支持(当然这是由于系统使用了基于IE的一些插件导致). 但是话又说回来,但是在支持系统的开发过程中,经常看到X-UA-Compatib

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div