우리가 논의하고 있는 주제는 CSS 웹 페이지 레이아웃입니다. 모든 사람에게 가장 골치 아픈 문제는 브라우저 호환성입니다. 52CSS.com이 이 방향에 대해 많은 지식을 소개했지만, 오늘의 기사에는 여전히 CSS가 20개나 있습니다. -IE와 Firefox의 JavaScript와 JavaScript의 세 가지 차이점이 모든 사람의 학습에 도움이 되기를 바랍니다.
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()를 사용하여 사용자 정의 속성을 얻을 수 있습니다. getAttribute( ) 사용자 정의 속성을 얻습니다.
해결 방법: getAttribute()를 통해 사용자 정의 속성을 균일하게 가져옵니다.
4. eval("idName") 문제 문제 설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 Firefox에서 ID가 idName인 HTML 개체를 얻을 수 있습니다. ID가 idName인 HTML 객체를 얻으려면 getElementById("idName")만 사용하세요.
해결 방법: 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 키워드만 사용하여 상수를 정의할 수 있습니다.
해결책: 상수를 정의하려면 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라고 가정).
예:
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에서는 even 개체에 srcElement 속성이 있지만 target 속성은 없습니다. Firefox에서는 even 개체에 target 속성이 있지만 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에서는 모달 및 비모달 창을 Firefox에서는 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를 사용하고, Firefox에서는 이전에 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의 상위 노드에 액세스하는 데 사용됩니다.
17. 커서:손 VS 커서:포인터
문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다.
해결책: 포인터를 균일하게 사용하십시오.
18. innerText 관련 문제.
문제 설명: innerText는 IE에서 정상적으로 작동하지만 innerText는 FireFox에서 작동하지 않습니다.
해결책: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하십시오.
예:
예제 소스 코드 [www.downcodes.com] if(navigator.appName.indexOf("탐색기") >-1){
document.getElementById('element').innerText = "내 텍스트";
} 또 다른{
document.getElementById('element').textContent = "내 텍스트";
}
19. 객체 너비 및 높이 할당 문제
문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 명령문이 유효하지 않습니다.
해결 방법: obj.style.height = imgObj.height + 'px'를 균일하게 사용하세요.
20. 테이블 작업 문제
문제 설명: IE, Firefox 및 기타 브라우저에서는 테이블 태그에 대한 작업이 다릅니다. IE에서는 tr을 추가하기 위해 js를 사용할 때 table 및 tr의 innerHTML 할당이 허용되지 않습니다. AppendChild 메소드도 작동하지 않습니다.
해결책:
예제 소스 코드 [www.downcodes.com] //테이블에 빈 행을 추가합니다.
var 행 = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(셀);
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 정의라도 페이지 표준에 따라 표시 효과가 달라집니다. 자세한 내용은 52CSS.com의 기사를 참조하세요. 개발에 따른 제안은 페이지를 표준 DHTML 표준을 사용하여 작성하고 테이블을 덜 사용하는 것입니다. CSS 정의는 IE와 같은 주류 브라우저를 고려하여 가능한 한 표준 DOM을 기반으로 해야 합니다. , 파이어폭스, 오페라. 그런데 많은 경우 FF와 Opera의 CSS 해석 표준은 CSS 표준에 더 가깝고 더 규범적입니다. 