찾다

집  >  기사  >  웹 프론트엔드  >  JavaScript 애플리케이션_javascript 기술에서 IE와 Firefox의 호환성에 대한 토론

JavaScript 애플리케이션_javascript 기술에서 IE와 Firefox의 호환성에 대한 토론

WBOY
WBOY원래의
2016-05-16 19:05:261000검색
1.document.formName.item("itemName") 문제

참고: IE에서는 document.formName.item("itemName") 또는 document.formName.elements [ "elementName"]; Firefox에서는 document.formName.elements["elementName"]만 사용할 수 있습니다.
해결책: document.formName.elements["elementName"]을 균일하게 사용하세요.

2. 컬렉션 개체 문제

설명: IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만, Firefox에서는 []만 사용하여 컬렉션 개체를 얻을 수 있습니다. 해결책: []를 균일하게 사용하여 컬렉션 객체를 얻습니다.


3. 사용자 정의 속성 문제
참고: IE에서는 일반 속성을 얻는 방법을 사용할 수 있습니다. 사용자 정의 속성 속성의 경우, getAttribute()를 사용하여 사용자 정의 속성을 얻을 수도 있습니다. Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.

4.eval("idName") 문제
설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 ID가 ​​다음과 같은 HTML 개체를 얻을 수 있습니다. idName; Firefox에서는 ID가 idName인 HTML 개체를 가져오려면 getElementById("idName")만 사용할 수 있습니다.
해결책: ID가 idName인 HTML 개체를 가져오려면 getElementById("idName")를 사용하세요. 🎜>

5. 변수명이 HTML 객체의 ID와 동일한 문제

설명: IE에서는 HTML 객체의 ID를 직접 사용할 수 있습니다. 문서의 하위 객체의 변수 이름으로, Firefox에서는 사용할 수 없습니다. Firefox에서는 HTML 객체 ID와 동일한 변수 이름을 사용할 수 있습니다. IE에서는 불가능합니다. 해결책: document.idName 대신 document.getElementById("idName")를 사용하십시오. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가하세요. >

6.const 문제


설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서는 var 키워드만 사용할 수 있습니다. 해결책: 상수를 정의하려면 var 키워드를 동일하게 사용하세요.

7. input.type 속성 문제


설명: IE에서의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다.
8.window.event 문제


설명: window.event는 IE Run에서는 사용할 수 있지만 Firefox에서는 실행할 수 없습니다. Firefox의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다. 해결 방법: IE:




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



IE&Firefox:



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


9.event.x 및 event.y 문제

설명: IE에서는 짝수 개체에 x, y 속성이 있지만 그 아래에는 pageX, pageY 속성이 없습니다. Firefox, 짝수 객체에는 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결 방법: IE에서 event.x 또는 Firefox 대신 mX(mX = event.x ? event.x : event.pageX;)를 사용하세요. event.page 객체에 target 속성이 있지만 srcElement 속성이 없습니다.
해결 방법: IE에서는 event.srcElement 대신에 obj(obj = event.srcElement ? event.srcElement : event.target;)를 사용하세요. Firefox

11.window.location.href 문제

설명: IE 또는 Firefox2.0.x에서는 window.location 또는 window.location을 사용할 수 있습니다. href; Firefox1 .5.x에서는 window.location만 사용할 수 있습니다.
해결책: window.location.href 대신
12. 창 문제


참고: IE에서는 showModalDialog 및 showModelessDialog를 통해 열 수 있지만 Firefox에서는 열 수 없습니다.
해결책: window.open(pageURL,name,parameters)을 사용하세요. ) 새 창을 엽니다. 하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 예: var parWin = window.opener.getElementById("Aqing ").value = "Aqing";

13.frame 문제

다음 프레임을 예로 들어 보겠습니다.

(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 문제


Firefox의 본문 태그가 브라우저에서 완전히 읽혀지지 않습니다. IE의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 합니다.

예: Firefox:



복사 code

코드는 다음과 같습니다. >

IE&Firefox:




코드 복사

코드는 다음과 같습니다.


15. 이벤트 위임 방법

IE: document.body.onload = inject; //이전에 inject() 함수가 구현되었습니다
Firefox: document.body . onload = inject();
어떤 사람들은 표준이 다음과 같다고 말합니다:
document.body.onload=new Function('inject()')

16. parentElement)의 상위 요소

IE: obj.parentElement
firefox: obj.parentNode
해결책: firefox와 IE 모두 DOM을 지원하므로 obj.parentNode를 사용하는 것이 좋습니다.

17. 커서:손 VS 커서:포인터

Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다.
해결책: 포인터를 균일하게 사용하세요

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 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 수행합니다, js를 사용하여 tr을 추가하는 경우 IE 할당에서 테이블 및 tr에 대한 innerHTML이 허용되지 않습니다. AppendChile 메서드를 사용하면 작동하지 않습니다.

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

21. padding 5px 4px 3px 1px FireFox는 약어를 해석할 수 없으며 padding-right:4px; padding-left:1px; >22 . ul 및 ol과 같은 목록의 들여쓰기를 제거하는 경우


스타일은 다음과 같이 작성해야 합니다. list-style: none; padding: 0px; 속성은 IE에 유효하고 패딩 속성은 FireFox
23에 유효합니다. CSS 투명도


IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0, 불투명도=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: border:2px outset;.
FF: -moz-경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색;-moz-경계-오른쪽-색상:#404040 #808080;-moz-경계- 하단 색상:#404040 #808080;
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS_javascript 기술로 복잡한 JavaScript 스크립트 작성다음 기사：CSS_javascript 기술로 복잡한 JavaScript 스크립트 작성

관련 기사

더보기