1. document.formName.item("itemName") 문제 설명: IE에서는 document.formName.item("itemName") 또는 document.formName.elements ["elementName"]을 사용할 수 있습니다. 문서 .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가 idName인 HTML 객체를 얻을 수 있습니다. Firefox에서는 getElementById("만 사용할 수 있습니다. idName")을 사용하여 ID가 idName인 HTML 개체를 가져옵니다.
해결 방법: getElementById("idName")를 균일하게 사용하여 ID가 idName인 HTML 개체를 가져옵니다.
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 키워드만 사용하여 상수를 정의할 수 있습니다.
해결책: 상수를 정의하려면 var 키워드를 균일하게 사용하십시오.
7. Input.type 속성 문제 문제 설명: IE의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다.
해결책: input.type 속성을 수정하지 마십시오. 수정해야 하는 경우 원래 입력을 먼저 숨긴 다음 동일한 위치에 새 입력 요소를 삽입할 수 있습니다.
8. Window.event 문제 문제 설명: window.event는 IE에서만 실행 가능하고, Firefox에서는 실행이 불가능합니다. 이는 Firefox의 이벤트가 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고, 함수 본문에 var myEvent = evt?evt:(window.event?window.event:null) 을 사용하십시오(형식 매개변수가 evt라고 가정).
예:
프로그램 코드
<스크립트 언어="자바스크립트">
함수 doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
9. Event.x 및 event.y 문제 설명: IE에서는 짝수 개체에 x 및 y 속성이 있지만, Firefox에서는 짝수 개체에 pageX 및 pageY 속성이 있지만 x 및 y 속성은 없습니다.
해결책: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
질문 8을 고려한다면 이벤트 대신 myEvent를 사용하세요.
10. Event.srcElement 문제 문제 설명: IE에서는 짝수 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. 짝수 개체에는 대상 속성이 있지만 srcElement 속성은 없습니다.
해결책: srcObj = event.srcElement ? event.srcElement : event.target;을 사용하십시오.
질문 8을 고려한다면 이벤트 대신 myEvent를 사용하세요.
11. Window.location.href 문제 문제 설명: IE 또는 Firefox2.0.x에서는 window.location을 사용할 수 있고 Firefox1.5.x에서는 window.location.href만 사용할 수 있습니다.
해결 방법: window.location.href 대신 window.location을 사용하십시오. 물론 location.replace() 메서드 사용을 고려할 수도 있습니다.
12. 모달 및 비모달 창 문제 문제 설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 모달 및 비모달 창을 열 수 있지만 이는 불가능합니다.
해결 방법: window.open(pageURL,name,parameters) 메서드를 직접 사용하여 새 창을 엽니다.
하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 하위 창을 제어하기 위해 상위 창이 필요한 경우 var subWindow = window.open(pageURL,name,parameters);를 사용하여 새로 열린 창 개체를 가져옵니다.
13. 프레임 및 i 프레임 문제는 다음 프레임을 예로 사용합니다.
http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) 프레임 개체 IE에 액세스합니다. window.frameId 또는 window.frameName을 사용하여 프레임 개체에 액세스합니다.
Firefox: 이 프레임 개체에 액세스하려면 window.frameName을 사용하세요.
해결 방법: 이 프레임 객체에 액세스하려면 window.document.getElementById("frameId")를 균일하게 사용하십시오.
(2) 프레임 내용을 전환하려면 window.document.getElementById("frameId").src = "index.html" 또는 window.frameName.location = "index.html"을 사용하여 두 IE 모두에서 프레임 내용을 전환할 수 있습니다. 그리고 파이어폭스;
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 프레임의 parent 키워드를 사용하여 상위 창에 액세스할 수 있습니다.
14. 본문 로딩 문제 문제 설명: 브라우저가 본문 태그를 완전히 읽기 전에 Firefox의 본문 개체가 존재하는 반면, 브라우저가 본문 태그를 완전히 읽은 후에 IE의 본문 개체가 존재해야 합니다.
[참고] 해당 이슈는 실제로 검증되지 않았으며, 검증 후 수정될 예정입니다.
[참고] IE6, Opera9, FireFox2에서는 위의 문제가 발생하지 않는 것으로 확인되었습니다. 간단한 JS 스크립트를 사용하면 해당 요소가 아직 로드되지 않은 경우에도 스크립트 이전에 로드된 모든 개체 및 요소에 액세스할 수 있습니다.
15. 이벤트 위임 방법 문제 설명: IE에서는 document.body.onload = inject를 사용하고, Firefox에서는 이전에 inject() 함수를 구현한 경우 document.body.onload = inject()를 사용합니다.
해결 방법: document.body.onload=new Function('inject()'); 또는 document.body.onload = function()을 사용하세요.{/* 다음은 코드입니다 */}
[참고] 함수와 함수의 차이점
16. 액세스된 상위 요소의 차이점 질문 설명: IE에서는 obj.parentElement 또는 obj.parentNode를 사용하여 obj의 상위 노드에 액세스하고, Firefox에서는 obj.parentNode를 사용하여 obj의 상위 노드에 액세스합니다. 노드.부모 노드.
해결 방법: firefox와 IE는 모두 DOM을 지원하므로 obj.parentNode는 obj의 상위 노드에 액세스하는 데 사용됩니다.
17. 커서:손 VS 커서:포인터
문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다.
해결책: 포인터를 균일하게 사용하십시오.
18. innerText 관련 문제.
문제 설명: innerText는 IE에서 정상적으로 작동하지만 innerText는 FireFox에서 작동하지 않습니다.
해결책: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하십시오.
예:
프로그램 코드
if(navigator.appName.indexOf("탐색기") >-1){
document.getElementById('element').innerText = "내 텍스트";
} 또 다른{
document.getElementById('element').textContent = "내 텍스트";
}
[참고] innerHTML은 IE, Firefox 등의 브라우저에서 동시에 지원됩니다. externalHTML과 같은 다른 브라우저는 IE에서만 지원되므로 사용하지 않는 것이 가장 좋습니다.
19. 개체 너비 및 높이 할당 문제 문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 문은 유효하지 않습니다.
해결책: obj.style.height = imgObj.height + 'px'를 균일하게 사용하십시오.
20. 테이블 작업 문제 문제 설명: IE, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 수행하며 이는 IE에서 허용되지 않습니다. innerHTML 할당의 경우 테이블과 tr의 경우 js를 사용하여 tr을 추가할 때 appendChild 메서드를 사용하면 작동하지 않습니다.
해결책:
프로그램 코드
//테이블에 빈 행을 추가합니다.
var 행 = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(셀);
[참고] 저는 JS를 사용하여 테이블을 직접 조작하는 경우가 거의 없기 때문에 이런 문제를 겪은 적이 없습니다. 테이블을 운영하려면 JQuery와 같은 JS 프레임워크를 사용하는 것이 좋습니다.
21. ul 및 ol 목록의 들여쓰기 문제 ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일은 다음과 같이 작성해야 합니다. list-style:none;margin:0px;padding:0px;
margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다. ← 이 문장은 잘못 표현되었습니다. 자세한 내용은 ↓를 참조하세요.
[참고] 해당 이슈는 실제로 검증되지 않았으며, 검증 후 수정될 예정입니다.
[참고] IE에서는 margin:0px를 설정하면 위쪽, 아래쪽, 왼쪽 및 오른쪽 들여쓰기, 공백, 목록 번호 또는 목록의 점을 제거할 수 있음이 Firefox에서 확인되었습니다. margin:0px를 설정하면 위쪽 및 아래쪽 들여쓰기만 제거할 수 있습니다. padding:0px를 설정한 후에는 왼쪽 및 오른쪽 들여쓰기만 제거할 수 있습니다. 목록 번호나 점을 제거하려면 list-style:none도 설정해야 합니다. 즉, IE에서는 margin:0px만 설정하면 최종 효과를 얻을 수 있지만, Firefox에서는 margin:0px, padding:0px, list-style:none을 동시에 설정해야 최종 효과를 얻을 수 있습니다.
22. CSS 투명성 문제 IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: 불투명도: 0.6.
[참고] 둘 다 작성하고 아래에 불투명도 속성을 넣는 것이 가장 좋습니다.
23. CSS 둥근 모서리 문제 IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다.
FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- 반경-오른쪽 아래:4px;.
[참고] 둥근 모서리 문제는 CSS의 고전적인 문제입니다. 둥근 모서리를 설정하려면 JQuery 프레임 세트를 사용하고 이러한 복잡한 문제는 다른 사람에게 맡기는 것이 좋습니다.
CSS에는 문제가 너무 많고, 동일한 CSS 정의라도 페이지 표준에 따라 표시 효과가 달라집니다. 개발에 따른 제안은 표준 DHTML 표준을 사용하여 페이지를 작성하고 테이블을 덜 사용하는 것입니다. CSS 정의는 IE, Firefox와 같은 주류 브라우저를 고려하여 가능한 한 표준 DOM을 기반으로 해야 합니다. , 그리고 오페라. 그런데 많은 경우 FF와 Opera의 CSS 해석 표준은 CSS 표준에 더 가깝고 더 규범적입니다.