js浏览器兼容手册

js 部分

  1. document.form.item 问题
    代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行
    解决方法：
    改用 document.formName.elements["elementName"]

  2. 集合类对象问题
    代码中许多集合类对象取用时使用()，IE能接受，FF不能
    解决方法：
    改用 [] 作为下标运算，例：
    document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

  3. window.event
    使用 window.event 无法在FF上运行
    解决方法：
    FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：
    onMouseMove = "functionName(event)"
    function functionName (e) {
    e = e || window.event;
    ......
    }

  4. HTML对象的 id 作为对象名的问题
    在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能
    解决方法：
    使用对象变量时全部用标准的 getElementById("idName")

  5. 用 idName 字符串取得对象的问题
    在IE中，利用 eval("idName") 可以取得 id 为 idName 的HTML对象，在FF中不能
    解决方法：
    用 getElementById("idName") 代替 eval("idName")

  6. 变量名与某HTML对象 id 相同的问题
    在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能
    解决方法：
    在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行
    最好不要取与HTML对象 id 相同的变量名，以减少错误

  7. event.x 与 event.y 问题
    在IE中，event 对象有x,y属性，FF中没有
    解决方法：
    在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
    故采用 event.clientX 代替 event.x ，在IE中也有这个变量
    event.clientX 与 event.pageX 有微妙的差别，就是滚动条
    要完全一样，可以这样：
    mX = event.x ? event.x : event.pageX;
    然后用 mX 代替 event.x

  8. 关于frame
    在IE中可以用 window.testFrame 取得该frame，FF中不行
    解决方法：
    window.top.document.getElementById("testFrame").src = 'xx.htm'
    window.top.frameName.location = 'xx.htm'

  9. 取得元素的属性
    在FF中，自己定义的属性必须 getAttribute() 取得

  10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes
    a.childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点
    解决方法：
    可以通过 node.getElementsByTagName() 来回避这个问题

b.当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：
<form>
<table>
<input/>
</table>
</form>
FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点

c.FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

  1. const 问题
    在IE中不能使用 const 关键字
    解决方法：
    以 var 代替

  2. body 对象
    FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
    这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
    解决方法：
    一切在body上插入节点的动作，全部在onload后进行

  3. url encoding
    一般FF无法识别js中的&
    在js中如果书写url就直接写&不要写&

  4. nodeName 和 tagName 问题
    在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
    解决方法：
    使用 tagName，但应检测其是否为空

  5. 元素属性
    IE下 input.type 属性为只读，但是FF下可以修改

  6. document.getElementsByName() 和 document.all[name] 的问题
    在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素
    是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

  7. 调用子框架或者其它框架中的元素的问题
    在IE中，可以用如下方法来取得子元素中的值
    document.getElementById("frameName").(document.)elementName
    window.frames["frameName"].elementName
    在FF中则需要改成如下形式来执行，与IE兼容：
    window.frames["frameName"].contentWindow.document.elementName
    window.frames["frameName"].document.elementName

  8. 对象宽高赋值问题
    FireFox中类似 obj.style.height = imgObj.height 的语句无效
    解决方法：
    统一使用 obj.style.height = imgObj.height + "px";

  9. innerText的问题
    innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
    解决方法：
    在非IE浏览器中使用textContent代替innerText

  10. event.srcElement和event.toElement问题
    IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
    解决方法：
    var source = e.target || e.srcElement;
    var target = e.relatedTarget || e.toElement;

  11. 禁止选取网页内容
    FF需要用CSS禁止，IE用JS禁止
    解决方法：
    IE: obj.onselectstart = function() {return false;}
    FF: -moz-user-select:none;

  12. 捕获事件
    FF没有setCapture()、releaseCapture()方法
    解决方法：
    IE:
    obj.setCapture();
    obj.releaseCapture();
    FF:
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    if (!window.captureEvents) {
    o.setCapture();
    }else {
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    if (!window.captureEvents) {
    o.releaseCapture();
    }else {
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }

23.//window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)

24.//鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。

25.//鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。

26.//event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

27.//event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var target = e.relatedTarget || e.toElement;

28.//标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。

29.//窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

30;//添加事件
IE：element.attachEvent("onclick", function);。
FF：element.addEventListener("click", function, true)。
通 用：element.onclick=function。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

31.//标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。

32.//HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用

33.//用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。

34.//变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

35.//document.getElementsByName() 和 document.all[name] 的问题
现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
//document.all
Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById("") 或者 getElementByTagName("")来代替
不过对于document.all.length等属性，则完全不兼容

36.//window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
解决方法:使用window.location来代替window.location.href

37.//模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

38.//frame问题
以下面的frame为例：
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
FF:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent来访问父窗口。例如：window.parent.document.form1.filename.value="Aqing";

39.//事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();

40.//firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
FF：obj.parentNode
解决方法: 因为FF与IE都支持DOM,因此使用obj.parentNode是不错选择

41.//innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent

42.//父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

43.//对select的options集合操作
枚举元素除了[]外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素，否则会失败
动态删除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option：
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
IE FF 动态删除通用方法：
document.getElementById("ddlResourceType").options[indx] = null;

44.//捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

45.//画图
IE：VML。
FF：SVG。

46.//CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

47.//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;。

48.模态和非模态窗口问题
问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

49.Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 建议使用JS框架集来操作table，如JQuery。

50.对象宽高赋值问题
问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + ‘px';

51.setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = ‘color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失

52.类名设置
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或者直接 object.className='styleClass';
IE和FF都支持object.className。

53.建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

CSS部分

div类

  1. 居中问题
    div里的内容，IE默认为居中，而FF默认为左对齐
    可以尝试增加代码margin:auto

  2. 高度问题
    两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
    所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
    但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
    .float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

  3. clear:both;
    不想受到float浮动的，就在div中写入clear:both;

  4. IE浮动 margin 产生的双倍距离

box {

float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略

}

  1. padding 问题
    FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）
    高度控制恰当，或尝试使用 height:100%;
    宽度减少使用 padding
    但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

  2. div嵌套时 y 轴上 padding 和 marign 的问题
    FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
    IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
    FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

  3. padding，marign，height，width 的傻瓜式解决技巧
    注意是技巧，不是方法：
    写好标准头
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
    宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

  1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
    先定义 ul {margin:0;padding:0;}

  2. ul和ol列表缩进问题
    消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

  1. display:block,inline 两个元素
    display:block; //可以为内嵌元素模拟为块元素
    display:inline; //实现同一行排列的的效果
    display:table; //for FF,模拟table的效果
    display:block 块元素，元素的特点是：
    总是在新行上开始；
    高度，行高以及顶和底边距都可控制；
    宽度缺省是它的容器的100%，除非设定一个宽度
    <div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
    display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

  2. 鼠标手指状显示
    全部用标准的写法 cursor: pointer;

背景、图片类

  1. background 显示问题
    全部注意补齐 width，height 属性

  2. 背景透明问题
    IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
    IE: filter: alpha(opacity=10);
    FF: opacity:0.6;
    FF: -moz-opacity:0.10;
    最好两个都写，并将opacity属性放在下面

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,539评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,911评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,337评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,723评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,795评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,762评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,742评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,508评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,954评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,104评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,736评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2赞 352