Summary of browser compatibility issues_javascript skills

JavaScript

1.HTML object acquisition problem

FireFox: document.getElementById(“idName”);

ie:document.idname or document.getElementById(“idName”).

Solution: Use document.getElementById(“idName”);

2.const problem

Note: Under Firefox, you can use the const keyword or the var keyword to define constants;

Under IE, you can only use the var keyword to define constants.

Solution: Use the var keyword uniformly to define constants.

3.event.x and event.y issues

Note: Under IE, the event object has x, y attributes, but does not have pageX, pageY attributes;

Under Firefox, the event object has pageX and pageY attributes, but no x, y attributes.

Solution: Use mX (mX = event.x ? event.x : event.pageX;) to replace event.x under IE or event.pageX under Firefox.

4.window.location.href problem

Note: Under IE or Firefox2.0.x, you can use window.location or window.location.href;

Under Firefox 1.5.x, you can only use window.location.

Solution: Use window.location instead of window.location.href.

5.frame problem

Take the following frame as an example:

<frame  src=”xxx.html”  id=”frameId”  name=”frameName”  />

(1) Access frame object:

IE: Use window.frameId or window.frameName to access this frame object. frameId and frameName can have the same name.

Firefox: This frame object can only be accessed using window.frameName.

In addition, you can use window.document.getElementById("frameId") to access this frame object in both IE and Firefox.

(2) Switch frame content:

In both IE and Firefox, you can use window.document.getElementById(“testFrame”).src = “xxx.html” or window.frameName.location = “xxx.html” to switch the content of the frame.

If you need to pass the parameters in the frame back to the parent window (note that it is not the opener, but the parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value=”Aqing”;

6. Modal and non-modal window issues

Note: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; this is not possible under Firefox.

Solution: Directly use window.open(pageURL, name, parameters) to open a new window.

If you need to pass parameters in the child window back to the parent window, you can use window.opener in the child window to access the parent window.

For example: var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

7. The difference between the parent element (parentElement) of firefox and IE

IE:obj.parentElement

firefox:obj.parentNode

Solution: Since both firefox and IE support DOM, using obj.parentNode is a good choice.

8.document.formName.item("itemName") Problem

Problem description: Under IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName"]; under Firefox, you can only use document.formName.elements["elementName"].

Solution: Use document.formName.elements["elementName"] uniformly.

9. Problems with collection objects

Problem description: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [ ] to obtain collection objects.

Solution: Use [] uniformly to obtain collection objects.

10. Custom attribute issues

Problem description: Under IE, you can use the method of obtaining regular attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; under Firefox, you can only use getAttribute() to obtain custom attributes.

Solution: Get custom attributes through getAttribute().

11.input.type attribute problem

Problem description: The input.type attribute under IE is read-only; but the input.type attribute under Firefox is read-write.

Solution: Do not modify the input.type attribute. If you must modify it, you can hide the original input first, and then insert a new input element at the same position.

12.event.srcElement problem

Problem description: Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but there is no srcElement attribute.

Solution: Use srcObj = event.srcElement ?event.srcElement : event.target;

If you consider question 8, just use myEvent instead of event.

13.body loading problem

Problem description: Firefox's body object exists before the body tag is fully read by the browser; while IE's body object must exist after the body tag is fully read by the browser.

[Note] This issue has not been actually verified and will be modified after verification.

[Note] It has been verified that the above problem does not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if the element has not been loaded yet.

14. Event delegation method

Problem description: Under IE, use document.body.onload = inject; where function inject() has been implemented before; under Firefox, use document.body.onload = inject();

Solution: Use document.body.onload=new Function('inject()'); or document.body.onload = function(){/* Here is the code */}

[Note] The difference between Function and function.

15.Table operation issues

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。

解决方法：//向table追加一个空行：

var row = otable.insertRow(-1);var cell = document.createElement(“td”);cell.innerHTML = “”;cell.className = “XXXX”;row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。

16.对象宽高赋值问题

问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。

Ø CSS

1.cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

2.innerText在IE中能正常工作，但在FireFox中却不行.

需用textContent。

解决方法:

if(navigator.appName.indexOf(“Explorer”)  >  -1){
document.getElementById(‘element').innerText  =  “my  text”;
}
else{
document.getElementById(‘element').textContent  =  “my  text”;
}

3.CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

4.css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
5.FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border 1px;}

ie理解为box.width = 100

ff理解为box.width = 100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6.IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7.ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;

经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

8.元素水平居中问题

FF: margin:0 auto;

IE: 父级{ text-align:center; }

9.Div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

10.margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

#imfloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/}

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? “600px”: “auto” );} 

#box{ float:left; width:800px;} 
#left{ float:left; width:50%;} 
#right{ width:50%;} 
*html #left{ margin-right:-3px; //这句是关键} 
<div id=”box”>
<div id=”left”></div>
<div id=”right”></div>
</div>

<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>

<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>

/* Clear Fix */ 
.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } 
.clearfix { display:inline-block; } 
/* Hide from IE Mac */ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 
/* end of clearfix */ 

#box { } 
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 
<div id=”box”>
<p>p对象中的内容＜/p>
</div>

<style type=”text/css”>
<!–
input { 
width:200px; 
height:30px; 
border:1px solid red; 
vertical-align:middle; 
} 
–>
</style>

<style type=”text/css”>
<!–
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
}
–>
</style>
 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!– 
html { 
scrollbar-face-color:#f6f6f6; 
scrollbar-highlight-color:#fff; 
scrollbar-shadow-color:#eeeeee; 
scrollbar-3dlight-color:#eeeeee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff; 
scrollbar-darkshadow-color:#fff; 
} 
–>
＜/style>

<param name=”wmode” value=”transparent” />

<style type=”text/css”>
<!–
a:link {} 
a:visited {} 
a:hover {} 
a:active {} 
–>
</style>

{ 
height:auto!important; 
height:200px; 
min-height:200px; 
}