IE의 js와 firefox의 차이점_기본 지식

1.firefox는 innerText를 지원할 수 없습니다.
Firefox는 innerHTML을 지원하지만 innerText는 지원하지 않습니다. innerText를 구현하기 위해 textContent를 지원하지만 기본적으로 추가 공백도 유지됩니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다.

2. 웹 콘텐츠 선택 금지:
일반적으로 IE에서는 js를 사용합니다: obj.onselectstart=function(){return false;}
Firefox는 CSS:-moz-user-select:none

을 사용합니다.

3. 필터 지원(예: 투명 필터):
IE:필터:알파(불투명도=10);
firefox:-moz-opacity:.10;

4. 캡쳐 이벤트:
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

5. 마우스 위치 가져오기:
IE: event.clientX, event.clientY
Firefox: 이벤트 객체를 전달하려면 이벤트 함수가 필요합니다
obj.onmousemove=function(ev){
X=ev.pageX;Y=ev.pageY;
}

6. DIV 및 기타 요소의 경계 문제:
예: div::{width:100px;height:100px;border:#000000 1px solid;}
의 CSS를 설정합니다. IE: div 너비(테두리 너비 포함): 100px, div 높이(테두리 너비 포함): 100px
그리고 Firefox: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함): 102px;

따라서 IE 및 Firefox와 호환되는 이 드래그 창을 만들려면 js와 css를 작성할 때 두뇌를 사용해야 합니다.

1. 브라우저 유형을 결정합니다:

var isIE=document.all? true:false;
변수를 작성했습니다. document.all 구문이 지원되면 isIE=true이고, 그렇지 않으면 isIE=false

2. 다양한 브라우저에서 CSS 처리:

일반적으로 !important를 사용하여 CSS 문 사용의 우선순위를 지정할 수 있습니다(firefox에서만 지원)
예: {border-width:0px!important;border-width:1px;}
Firefox에서는 이 요소에 테두리가 없습니다. IE에서는 테두리 너비가 1픽셀입니다

1.document.formName.item("itemName") 문제

문제에 대한 설명: IE에서는 document.formName.item("itemName")을 사용할 수 있고 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가 ​​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는 Firefox가 아닌 IE에서만 실행될 수 있습니다. 이는 Firefox의 이벤트가 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고, 함수 본문에 var myEvent = evt?evt:(window.event?window.event:null)
을 사용하세요(형식 매개변수가 evt라고 가정). 예:

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

<스크립트 언어="javascript"> 함수 doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}

9.Event.x 및 event.y 문제 문제에 대한 설명: IE에서는 짝수 개체에 x 및 y 속성이 있지만 pageX 및 pageY 속성은 없습니다. 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만 사용할 수 있습니다.

해결 방법: window.location.href 대신 window.location을 사용하십시오. 물론 location.replace() 메서드 사용을 고려할 수도 있습니다.

12. 모달 및 비모달 창 문제

문제 설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 모달 및 비모달 창을 열 수 있지만 Firefox에서는 열 수 없습니다.

해결 방법: window.open(pageURL,name,parameters)을 직접 사용하여 새 창을 엽니다.
하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 하위 창을 제어하기 위해 상위 창이 필요한 경우 var subWindow = window.open(pageURL,name,parameters);를 사용하여 새로 열린 창 개체를 가져옵니다.

13.Frame 및 iframe 문제

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

(1)액세스 프레임 객체
IE: 이 프레임 개체에 액세스하려면 window.frameId 또는 window.frameName을 사용하세요. Firefox: 이 프레임 객체에 액세스하려면 window.frameName을 사용하세요. 해결책: 이 프레임 객체에 액세스하려면 window.document.getElementById("frameId")를 동일하게 사용하십시오.

(2) 프레임 내용 전환
IE와 Firefox 모두에서 window.document.getElementById("frameId").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 프레임 내용을 전환할 수 있습니다.
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 프레임의 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 등의 브라우저에서 동시에 지원됩니다. OuterHTML과 같은 다른 브라우저는 IE에서만 지원되므로 사용하지 않는 것이 가장 좋습니다.

19. 개체 너비 및 높이 할당 문제
문제 설명: obj.style.height = imgObj.height와 같은 문은 FireFox에서 유효하지 않습니다.
해결책: obj.style.height = imgObj.height 'px';

를 사용하세요.

20.테이블 운영 문제
문제 설명: IE, Firefox 및 기타 브라우저는 테이블 태그에 대해 서로 다른 작업을 수행합니다. IE에서는 테이블 및 tr의 innerHTML 할당이 허용되지 않습니다. 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: 필터:progid:DXImageTransform.Microsoft.Alpha(스타일=0,불투명도=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와 같은 주류 브라우저를 고려하여 가능한 한 표준 DOM을 기반으로 해야 한다는 것입니다. 파이어폭스, 오페라. 그런데 많은 경우 FF와 Opera의 CSS 해석 표준은 CSS 표준에 더 가깝고 더 규범적입니다.