IE와 Firefox_javascript 기술 간의 JavaScript 비호환 문제에 대한 솔루션 요약

1.兼容firefox의 externalHTML,FF中没有outerHtml적 방법.

复代码 代码如下:

if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this)
return sHTML;
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="for (var i=0;iattr=attrs[i]
if(attr.specified)
str =" " attr.name ' ="' attr.value '"';
}
if(!this.canHaveChildren)
return str ">"; return str ">" " this.tagName.toLowerCase() ">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area": ​​
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case " input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true ;
});
}

2.集合类对象问题
说明:IE下,可以使用()或[]获取集类对象;Firefox下,只能使用[]获取集合类对象. 解决방법:统一使用[]获取集合类对象.

3.자정 특성 보호
설명:IE下,可以使사용 설명义属性;Firefox下, getAttribute()를 사용자 정의하는 데 사용합니다. 통합 방법: getAttribute()를 자체적으로 정의합니다.


4.eval("idName")问题
说明:IE下,,可以使용eval("idName")或getElementById("idName")来取得id为idName HTML对象;Firefox에서 getElementById("idName")를 사용하여 idName을 HTML로 설정하세요. 사용 방법: getElementById("idName")는 idName의 HTML 형식을 사용합니다.

5. 变某HTML对象ID는 같은 형식입니다.
설명:IE下,HTML对象적 ID는 문서의 아래쪽에 있습니다.Firefox는 아래에 없습니다. 파이어폭스下,可以使用与HTML对象ID는 같은 의미의 이름;IE下则不能. 설명 방법:使usedocument.getElementById("idName")代替document.idName.以减少错误;재존명명당량时,一律加上var,以避免歧义. 설명 방법:统一使사용 변수는 소문자로 결정됩니다.

7.input.type属性问题 说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox의 event只能在事件发生的现场사용. 解决방법:
IE:


复代码

代码如下: < ;입력 이름="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/> ... <script> </script>function gotoSubmit8_1() {

...

alert(window.event); //window.event 사용
...
}



IE&Firefox:

复代码

代码如下: < ;입력 이름="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/> ... <script> </script>function gotoSubmit8_2(evt) {

...

evt=evt?evt:(window.event?window.event:null);
경고(evt); //evt 사용
...
}



9.Event.x 및 event.y 문제
설명: IE에서는 짝수 개체에 x, y 속성이 있지만 Firefox에서는 짝수 개체에 pageX, pageY 속성이 없습니다. 개체에 pageX, pageY 속성이 있지만 x, y 속성이 없습니다.
해결 방법: IE 또는 event.pageX에서 mX(mX = event.x? event.x: event.pageX;)를 사용하여 교체하세요. Firefox에서는

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

(1) 프레임 개체에 액세스합니다.
IE: window.frameId 또는 window.frameName을 사용하여 이 프레임 개체에 액세스합니다.
Firefox: 이 프레임 객체에 액세스하려면 window.frameName을 사용하세요.
또한 IE와 Firefox 모두에서 window.document.getElementById("frameId")를 사용하여 이 프레임 객체에 액세스할 수 있습니다.
(2) 프레임 콘텐츠 전환:
IE와 Firefox 모두에서 사용할 수 있습니다. window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 프레임 내용을 전환하세요.
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 frme의 parent를 사용하여 상위 창에 액세스할 수 있습니다. 예: parent.document.form1.filename.value="Aqing";
14.body 문제
브라우저와 IE의 본문이 body 태그를 완전히 읽기 전에 Firefox의 본문이 존재합니다.
예:
Firefox:

코드 복사 코드는 다음과 같습니다.

IE

코드 복사 코드는 다음과 같습니다.

;/ body>

15. 이벤트 대리자 메서드

IE: document.body.onload = //함수 삽입( ) in 이것은
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 VScursor:pointer

firefox는 손을 지원하지 않지만 즉, 지원합니다. 포인터
해결책: 포인터를 균일하게 사용하세요
18. innerText는 IE에서 정상적으로 작동하지만, innerText는 FireFox에서 작동하지 않습니다.

해결책:


코드 복사

코드는 다음과 같습니다. if(navigator.appName.indexOf("Explorer") > -1 ){ document.getElementById('element').innerText = "내 텍스트";

} else{

document.getElementById('element').textContent = "내 텍스트"
}


19. obj.style.height = imgObj.height와 같은 문은 FireFox에서 유효하지 않습니다.
해결책:
obj.style.height = imgObj.height 'px';

20. IE, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 수행합니다. IE에서는 tr을 추가하기 위해 js를 사용하는 경우 innerHTML 할당이 허용되지 않습니다. 작동하지 않습니다. 해결책:

코드 복사 코드는 다음과 같습니다.

//하나 추가 테이블에 빈 행:
var row = otable.insertRow(-1);
var cell = document.createElement("td")
cell.innerHTML = " "
cell. className = " XXXX";
row.appendChild(cell);

21. 패딩 문제 FireFox는 약어를 해석할 수 없습니다. 🎜>는 padding-top:5px; padding-bottom:3px;


22로 변경해야 합니다. 기타 목록
스타일은 다음과 같이 작성해야 합니다: list-style:none;margin:0px;padding:0px; margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다


23. CSS 투명성
IE: 필터:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). FF:불투명도: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 -경계-반경-하단오른쪽:4px;.

25. CSS 이중선 범프 테두리
IE: 테두리:2px 오프셋;. FF: -moz-경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색;-moz-경계-오른쪽-색상:#404040 #808080;-moz-경계- 하단 색상: #404040 #808080;

여기에는 IE와 Firefox 간의 관련 호환성도 있습니다.

IE와 Firefox 간의 비호환성에 대한 솔루션 모음