浏览器兼容性小记-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篇(一)的更多相关文章
- 浏览器兼容性小记-DOM篇(二)
1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: Node.ELEMENT_NODE ...
- 浏览器兼容性之Css篇
本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...
- 浏览器兼容性之JavaScript篇
近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大 ...
- 浏览器兼容性汇总--JavaScript篇
目录 JavaScript中的兼容性汇总 1. HTML对象获取问题 2. const问题 3. event.x与event.y问题 4. wi ...
- 浏览器兼容性汇总--CSS篇
目录 CSS篇 1. cursor:hand VS cursor:pointer 2. innerText在IE中能正常工作,但在FireFox中却不行 3. ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- 浏览器兼容性-JS篇
总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...
- 常见浏览器兼容性问题与解决方案css篇
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
随机推荐
- PHP中spl_autoload_register函数的用法
spl_autoload_register (PHP 5 >= 5.1.2) spl_autoload_register — 注册__autoload()函数 说明bool spl_autolo ...
- ue4 NewObject/StaticConstructObject_Internal/StaticAllocateObject/FObjectInitializer:对象创建和初始化
UObject是一套很复杂的体系,之前读ue3代码时曾分析过其类型系统实现,主要是与UClass间的关系 现在转到ue4,发现那一块其实差不多,于是再重点备忘一下UObject本身的创建和初始化过程 ...
- oracle数据库升级记(记一次10.2.0.3版本升级到11.2.0.1版本的过程)
操作系统:windows xp 已有数据库版本:10.2.0.3 升级目标版本:11.2.0.1 步骤大纲: 在源操作系统(安装有10.2.0.3数据库的操作系统)上安装11.2.0.1数据库软件,然 ...
- c# json转换实例
用户实体: public class UserModel { public long? UserId { get; set; } public string UserName { get; set; ...
- Python小练习四
# 使用给定的宽度打印格式化后的价格列表 width = (int)(input('Please enter width:')) price_width = 10 item_width = width ...
- Nessus导入Cookie进行Web应用安全扫描
在不导入Cookie使用Nessus进行扫描的时候,扫描的结果是比较简单的,很多深层的问题无法被扫描出来. 需要我们手动导入Cookie,带着Cookie的状态扫描的结果会更详细更深入,以下是操作步骤 ...
- Mysql 启动不了,问题集锦
1. 报错信息 mysqld_safe mysqld from pid file xxx.pid ended 解决办法: 可能是pid所在目录,没有权限,赋予权限即可 2. 找不到 /tmp/mysq ...
- javascript中array常用属性方法
属性: length 表示一个无符号 32-bit 整数,返回一个数组中的元素个数. 截短数组..截短至长度2 则: .length = 2 方法: Array.from() 方法可以将一个类数 ...
- pundit
gem "pundit" Include Pundit in your application controller: class ApplicationController &l ...
- Latent semantic analysis note(LSA)
1 LSA Introduction LSA(latent semantic analysis)潜在语义分析,也被称为LSI(latent semantic index),是Scott Deerwes ...