IE, Firefox 및 Opera에서 페이지 표시의 유사점과 차이점과 관련하여 스크립트 작성은 고통스럽습니다_javascript 기술

1.document.formName.item("itemName") 문제
설명: IE에서는 document.formName.item("itemName") 또는 Firefox에서는 document.formName.elements ["elementName"]을 사용할 수 있습니다. document.formName.elements["elementName"]만 사용할 수 있습니다.
해결 방법: document.formName.elements["elementName"]을 균일하게 사용하세요.
컬렉션 클래스 개체 문제
설명: IE에서는 () 또는 []를 사용하여 컬렉션 객체를 얻을 수 있습니다.
해결책: 사용자 정의 속성 문제를 얻으려면 []만 사용할 수 있습니다.
참고: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 얻을 수 있고, getAttribute()를 사용하여 사용자 정의 속성을 얻을 수 있지만, Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다. 🎜>해결책: 통합 getAttribute()를 통해 사용자 정의 속성을 가져옵니다.
4.eval("idName") 문제
설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 idName HTML 개체로 ID를 가져옵니다. Firefox에서는 ID가 idName인 HTML 개체를 얻으려면 getElementById("idName")만 사용할 수 있습니다.
해결책: getElementById("idName")를 균일하게 사용하여 HTML 개체를 가져옵니다. the id idName.
5. 변수명이 HTML 객체의 ID와 동일하다는 문제
참고: IE에서는 HTML 객체의 ID를 하위 변수의 이름으로 직접 사용할 수 있습니다. Firefox에서는 HTML 개체의 ID를 사용할 수 없습니다. IE에서는 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하십시오. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가하세요. >6.const 문제
설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서 상수를 정의할 수 있습니다.
해결책: var 키워드를 균일하게 사용하세요.
7.Input.type 속성 문제
설명: IE의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은
8.window입니다. .event 문제
설명: window.event는 Firefox가 아닌 IE에서만 실행할 수 있습니다. 이는 Firefox의 이벤트가 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다.
해결 방법:
IE:


...

IE&Firefox:


...

9.event.x 및 이벤트 . y 문제
설명: IE에서는 짝수 개체에 x, y 속성이 있지만, Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결책: IE에서는 event.x를, Firefox에서는 event.pageX를 바꾸려면 mX(mX = event.x ? event.x : event.pageX;)를 사용하세요.
10.event.srcElement 문제
설명: IE에서는 even 객체에는 srcElement 속성이 있지만 target 속성은 없습니다. Firefox에서는 even 객체에 target 속성이 있지만 srcElement 속성이 없습니다.
해결책: obj를 사용하세요(obj = event.srcElement ? event.srcElement : event). .target;) IE의 event.srcElement 또는 Firefox의 event.target을 바꾸려면
11.window.location.href 문제
설명: IE 또는 Firefox2.0.x에서는 window.location을 사용할 수 있습니다. window.location .href; Firefox 1.5.x에서는 window.location만 사용할 수 있습니다.
해결 방법: window.location.href 대신 window.location을 사용하세요.
12. 🎜 >참고: IE에서는 showModalDialog 및 showModelessDialog를 통해 모달 및 비모달 창을 열 수 있지만 Firefox에서는 열 수 없습니다.
해결책: 새 창을 열려면 window.open(pageURL, 이름, 매개변수)을 직접 사용하세요.
자식 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 예: var parWin = window.opener.getElementById; ("Aqing"). value = "Aqing";
13.프레임 문제
다음 프레임을 예로 들어 보겠습니다.


(1) 프레임 개체에 액세스합니다. IE: 이 프레임 개체에 액세스하려면 window.frameId 또는 window .frameName을 사용하세요.
Firefox: 이 프레임 개체에 액세스하려면 window.frameName만 사용할 수 있습니다.
또한 window.document.getElementById("를 사용할 수도 있습니다. FrameId")를 사용하여 IE와 Firefox 모두에서 액세스합니다. 이 프레임 개체입니다.
(2) 프레임 내용 전환:
window.document.getElementById("testFrame").src = "xxx.html"을 사용할 수 있습니다. 또는 window.frameName.location = IE 및 Firefox 모두에서 "xxx.html"을 사용하여 프레임 내용을 전환합니다.
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 frme에서 parent를 사용할 수 있습니다. 부모 창에 액세스합니다.例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：

IE&Firefox：



15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');



16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';

20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. 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;。
25. 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;