IE의 javascript css와 Firefox_javascript 기술의 차이점 분석

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를 얻을 수 있습니다. idName HTML 개체로, Firefox에서는 getElementById("idName")만 사용하여 id가 idName인 HTML 개체를 얻을 수 있습니다.
해결 방법: getElementById("idName")를 균일하게 사용하여 ID가 ​​idName인 HTML 개체를 가져옵니다.

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 키워드를 균일하게 사용하여 상수를 정의하세요.

7. input.type 속성 문제
문제 설명: IE의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다. .
해결 방법: input.type 속성을 수정하지 마세요. 수정해야 하는 경우 원래 입력을 먼저 숨긴 다음 동일한 위치에 새 입력 요소를 삽입할 수 있습니다.

8. Window.event 문제
문제 설명: window.event는 IE에서만 실행할 수 있고 Firefox에서는 실행할 수 없습니다. 이는 Firefox의 이벤트가 Used에서만 실행될 수 있기 때문입니다. 사건 현장에서.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고 함수 본문에 var myEvent = evt?evt:(window.event?window.event:null)
을 사용합니다(형식 매개변수가 다음과 같다고 가정). evt) 예 :

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

<script> <BR>function doSomething(evt) { <BR>var myEvent = evt?evt:(window.event ?window.event:null ) <BR>... <BR>} <BR></script>

9. event.x 및 event.y 문제
문제 설명: IE에서는 짝수 개체에 x 및 y 속성이 있지만 Firefox에서는 pageX 및 pageY 속성이 없습니다. 짝수 객체에는 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결책: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
질문 8을 대신 사용하세요. 이벤트만 바꾸세요. .

10. Event.srcElement 문제
문제 설명: IE에서는 짝수 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. 이지만 srcElement 속성은 없습니다.
해결 방법: srcObj = event.srcElement ? event.srcElement : event.target;
8번째 질문을 고려한다면 event 대신 myEvent를 사용하세요.

11. Window.location.href 문제
문제 설명: IE 또는 Firefox2.0.x에서는 window.location 또는 window.location.href1을 사용할 수 있습니다. 5.x 이하에서는 window.location만 사용할 수 있습니다.
해결책: 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. 프레임 및 iframe 문제
다음 프레임을 예로 들어 보겠습니다.

　(1)액세스 프레임 객체
　IE: window.frameId 또는 window.frameName을 사용하여 이 프레임 객체에 액세스합니다.
　Firefox: window 사용 .frameName을 사용하여 이 프레임 개체에 액세스합니다.
해결책: 이 프레임 개체에 액세스하려면 window.document.getElementById("frameId")를 동일하게 사용합니다.
(2) IE와 Firefox 모두에서 프레임 콘텐츠를 전환할 수 있습니다. window.document.getElementById("frameId").src = "52css.com.html" 또는 window.frameName.location = "52css.com.html"을 사용하여 프레임 내용을 전환하세요.
필요한 경우; 프레임 변경 매개변수가 상위 창으로 다시 전달됩니다. 프레임에서 parent 키워드를 사용하여 상위 창에 액세스할 수 있습니다.


14. 본문 로딩 문제 문제 설명: 브라우저가 본문 태그를 완전히 읽기 전에 Firefox의 본문 개체가 존재하지만 IE의 본문 개체는 본문이 나올 때까지 존재하지 않습니다. 브라우저가 태그를 완전히 읽었습니다.
[참고] 해당 이슈는 실제 검증된 사항은 아니며, 검증 후 수정될 예정입니다.
[참고] IE6, Opera9, FireFox2에서는 위의 문제가 없는 것으로 확인되었습니다. 요소가 로드되지 않은 경우에도 스크립트 이전에 로드된 모든 개체 및 요소에 간단한 JS 스크립트로 액세스할 수 있습니다. 아직.


15. 이벤트 위임 방법 문제 설명: IE에서는 document.body.onload = inject를 사용합니다. 여기서 inject() 함수는 이전에 구현되었습니다. document.body.onload = inject();
해결 방법: document.body.onload=new Function('inject()') 또는 document.body.onload = function()을 사용하세요.{/* 코드는 다음과 같습니다. /}
[참고] Function과 function의 차이점


16. 접근된 상위 요소의 차이점 문제 설명: IE에서는 obj .parentElement 또는 obj를 사용합니다. parentNode는 obj의 상위 노드에 액세스합니다. Firefox에서는 obj.parentNode를 사용하여 obj의 상위 노드에 액세스합니다.
해결 방법: Firefox와 IE는 모두 DOM을 지원하므로 obj.parentNode를 사용하여 obj의 상위 노드에 액세스합니다.


Seventeen.cursor:hand VS 커서:pointer 문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 지침입니다.
해결책: 포인터를 균일하게 사용하십시오.


18. innerText 문제.문제 설명: innerText는 IE에서는 정상적으로 작동하지만, innerText는 FireFox에서 작동하지 않습니다.
해결 방법: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하세요.
예:

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

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "내 텍스트"
} else{
document.getElementById('element').textContent = "my text";
}

[참고] innerHTML은 IE, Firefox 및 기타 브라우저에서도 지원됩니다. asouterHTML IE에서만 지원하므로 사용하지 않는 것이 가장 좋습니다.

19. 개체 너비 및 높이 할당 문제
문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 문이 잘못되었습니다.
해결 방법: obj.style.height = imgObj.height 'px'; 브라우저는 테이블 태그에 대해 다른 작업을 수행합니다. IE에서는 테이블과 tr의 innerHTML 할당이 허용되지 않습니다. 방법이 작동하지 않습니다.
해결 방법:


코드 복사

코드는 다음과 같습니다. //하나 추가 테이블에 빈 행: var row = otable.insertRow(-1); var cell = document.createElement("td")

cell.innerHTML = ""

cell. className = " XXXX";
row.appendChild(cell);


[참고] 저는 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 -경계-반경-하단오른쪽:4px;.
[참고] 둥근 모서리 문제는 CSS의 전형적인 문제입니다. 둥근 모서리를 설정하려면 JQuery 프레임 세트를 사용하고 이러한 복잡한 문제는 다른 사람에게 맡기는 것이 좋습니다. CSS에는 문제가 너무 많고, 동일한 CSS 정의라도 페이지 표준에 따라 표시 효과가 달라집니다. 자세한 내용은 52CSS.com의 기사를 참조하세요. 개발에 따른 제안은 테이블을 덜 사용하면서 표준 DHTML 표준을 사용하여 페이지를 작성해야 한다는 것입니다. CSS 정의는 IE와 같은 주류 브라우저를 고려하여 가능한 한 표준 DOM을 기반으로 해야 합니다. 파이어폭스, 오페라. 그런데 많은 경우 FF와 Opera의 CSS 해석 표준은 CSS 표준에 더 가깝고 더 규범적입니다.