JAVASCRIPT IE와 FF_javascript 기술 간의 호환성 문제 요약
- WBOY원래의
- 2016-05-16 18:55:51862검색
png transparent AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)
활성화: 선택 사항 . 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true: 기본값입니다. 필터가 활성화되었습니다. false: 필터가 비활성화됩니다.
크기 조정 방법: 선택 사항입니다. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방식을 설정하거나 검색합니다. 자르기: 개체 크기에 맞게 이미지를 자릅니다. 이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다. scale: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.
src: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.
firefox는 innerText를 지원할 수 없습니다
firefox는 innerHTML을 지원하지만 innerText는 지원하지 않습니다. innerText를 구현하기 위해 textContent를 지원하지만 기본적으로 추가 공백도 유지됩니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다.
웹 콘텐츠 선택 금지
일반적으로 IE에서는 js를 사용합니다: obj.onselectstart=function(){return false;}
Firefox는 CSS를 사용합니다:-moz-user -select:none
필터 지원(예: 투명도 필터)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10 ;
이벤트 캡처
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);
마우스 위치 가져오기
IE: event.clientX, event.clientY
firefox: 이벤트 함수는
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}
DIV 및 기타 이벤트 객체를 전달해야 합니다. 요소 테두리 문제
예: div의 CSS 설정: {width:100px;height:100px;border:#000000 1px solid;}
IE에서: div의 너비( 테두리 너비): 100px , div 높이(테두리 너비 포함): 100px
및 firefox: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함) ): 102px;
판단 브라우저 유형
var isIE=document.all ? true : false;
document.all 구문이 지원되는 경우 변수를 작성했습니다. isIE=true, 그렇지 않으면 isIE=false
다른 브라우저에서 CSS 처리
일반적으로 !important를 사용하여 CSS 문 사용의 우선순위를 지정할 수 있습니다(firefox에서만 지원)
예: {border-width:0px!important;border-width: 1px;}
Firefox에서는 이 요소에 테두리가 없지만 IE
문서에서는 테두리 너비가 1px입니다. formName.item("itemName") 문제
문제 참고: IE에서는 document.formName.item("itemName") 또는 Firefox에서 document.formName.elements ["elementName"]를 사용할 수 있습니다. document.formName.elements["elementName"]만 사용할 수 있습니다.
해결책: document.formName.elements["elementName"]를 균일하게 사용하세요.
컬렉션 개체 문제
문제 설명: IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만, Firefox에서는 []만 사용하여 컬렉션을 얻을 수 있습니다. 사물.
해결책: 컬렉션 개체를 얻으려면 []를 균일하게 사용하세요.
사용자 정의 속성 문제
문제 설명: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 가져오거나 getAttribute()를 사용하여 사용자 정의 속성을 가져올 수 있습니다. Firefox 이 상황에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.
eval("idName") 문제
문제 설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 ID가 있는 HTML을 가져올 수 있습니다. idName 개체; Firefox에서는 getElementById("idName")만 사용하여 id가 idName인 HTML 개체를 얻을 수 있습니다.
해결책: getElementById("idName")를 균일하게 사용하여 ID가 idName인 HTML 개체를 가져옵니다.
변수명이 HTML 객체의 ID와 동일한 문제
문제 설명: IE에서 HTML 객체의 ID를 하위 항목으로 직접 사용할 수 있음 문서의 개체 변수 이름이지만 Firefox에서는 사용할 수 없습니다. Firefox에서는 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하세요. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var 키워드를 추가하세요.
const 문제
문제 설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서 상수를 정의할 수 있지만 var 키워드만 사용하여 상수를 정의할 수 있습니다. .
해결책: var 키워드를 균일하게 사용하여 상수를 정의하세요.
Input.type 속성 문제
문제 설명: IE의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다.
해결책: input.type 속성을 수정하지 마세요. 수정해야 하는 경우 원래 입력을 먼저 숨긴 다음 동일한 위치에 새 입력 요소를 삽입할 수 있습니다.
window.event 문제
문제 설명: window.event는 IE에서만 실행되고 Firefox에서는 실행되지 않습니다. 이는 Firefox의 이벤트가 이벤트가 발생할 때만 실행될 수 있기 때문입니다. . 현장 사용을 위해.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고 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><br><STRONG>event.x 및 event.y 문제<BR>문제 설명: IE에서는 짝수 개체에 x 및 y 속성이 있지만 Firefox에서는 pageX 및 pageY 속성이 없습니다. 짝수 개체에는 pageX, pageY 속성이 있지만 x, y 속성은 없습니다. <BR>해결책: var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;<BR>질문 8을 고려한다면 대신 myEvent를 사용하세요. . <br><br><STRONG>event.srcElement 문제<BR>문제 설명: IE에서는 짝수 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. srcElement 속성이 없습니다. <BR>해결책: srcObj = event.srcElement ? event.srcElement : event.target;을 사용하세요. <BR>질문 8을 고려한다면 이벤트 대신 myEvent를 사용하세요. <br><br><STRONG>window.location.href 문제<BR>문제 설명: IE 또는 Firefox2.0.x에서는 window.location 또는 window.location.href를 사용할 수 있습니다. x 이 조건에서는 window.location만 사용할 수 있습니다. <BR>해결책: window.location.href 대신 window.location을 사용하세요. 물론 location.replace() 메서드 사용을 고려할 수도 있습니다. <br><br><STRONG>모달 및 비모달 창 문제<BR>문제 설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 열 수 있지만 이는 불가능합니다. . <BR>해결책: window.open(pageURL,name,parameters)을 직접 사용하여 새 창을 엽니다. <BR>자식 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 하위 창을 제어하기 위해 상위 창이 필요한 경우 var subWindow = window.open(pageURL,name,parameters);를 사용하여 새로 열린 창 개체를 가져옵니다. <br><br><STRONG>프레임 및 iframe 문제<BR>다음 프레임을 예로 들어 보겠습니다. <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) 프레임 객체에 액세스<BR>IE: 창 사용 .frameId 또는 window.frameName을 사용하여 이 프레임 객체에 액세스합니다. <BR>Firefox: 이 프레임 객체에 액세스하려면 window.frameName을 사용하세요. <BR>해결책: 이 프레임 객체에 액세스하려면 window.document.getElementById("frameId")를 동일하게 사용하세요. <br><br>(2) 프레임 콘텐츠 전환<BR>IE와 Firefox 모두에서 window.document.getElementById("frameId").src = "xxx.html" 또는 window.frameName.location = "를 사용할 수 있습니다. xxx.html"을 사용하여 프레임 내용을 전환합니다. <BR> 프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 프레임의 parent 키워드를 사용하여 상위 창에 액세스할 수 있습니다. <br><br><STRONG>본문 로딩 문제<BR>문제 설명: 브라우저가 body 태그를 완전히 읽기 전에 Firefox의 body 개체가 존재하지만 IE의 body 개체는 body 태그에 있어야 합니다. 브라우저가 완전히 읽을 때까지. <BR>[참고] 이 문제는 아직 검증되지 않았으며 검증 후 수정될 예정입니다. <BR>[참고] IE6, Opera9, FireFox2에서는 위의 문제가 없는 것으로 확인되었습니다. 요소가 로드되지 않은 경우에도 스크립트 이전에 로드된 모든 개체 및 요소에 간단한 JS 스크립트로 액세스할 수 있습니다. 아직. <br><br><STRONG>이벤트 위임 방법<BR>문제 설명: IE에서는 document.body.onload = inject를 사용합니다. 이전에 Firefox에서 inject() 함수가 구현된 경우 document.body를 사용합니다. .onload = inject();<BR>해결책: document.body.onload=new Function("inject()") 또는 document.body.onload = function()을 사용하세요.{/* 코드는 다음과 같습니다. */}<BR>[참고] Function과 function의 차이<br><br><STRONG>부모 요소에 접근하는 차이<BR>문제 설명: IE에서는 obj.parentElement 또는 obj.parentNode를 사용하여 부모 요소에 접근 obj의 노드, Firefox에서는 obj.parentNode를 사용하여 obj의 상위 노드에 액세스합니다. <BR>해결책: firefox와 IE는 모두 DOM을 지원하므로 obj.parentNode는 obj의 상위 노드에 액세스하는 데 균일하게 사용됩니다.<br><br><STRONG>커서:손 VS 커서:포인터<BR>문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 지침입니다. <BR>해결책: 포인터를 균일하게 사용하십시오. <br><br><STRONG>innerText 문제<BR>문제 설명: innerText는 IE에서는 정상적으로 작동하지만, innerText는 FireFox에서는 작동하지 않습니다. <BR>해결 방법: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하세요. <BR>예: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "내 텍스트";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[참고] innerHTML은 IE 및 Firefox와 같은 브라우저에서 지원됩니다. 즉, 사용하지 않는 것이 가장 좋습니다. <br><br><STRONG>객체 너비 및 높이 할당 문제<BR>문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 문이 잘못되었습니다. <BR>해결 방법: obj.style.height = imgObj.height "px"를 균일하게 사용하세요. IE에서는 tr을 추가하기 위해 js를 사용할 때 table 및 tr의 innerHTML 할당이 허용되지 않습니다. ,appendChild 메서드가 작동하지 않습니다. <br>해결책: <br>//테이블에 빈 행 추가: <STRONG>var row = otable.insertRow(-1);var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[참고] 저는 JS를 사용하여 테이블을 직접 조작하는 경우가 거의 없기 때문에 이런 문제를 겪은 적이 없습니다. . 테이블을 운영하려면 JQuery와 같은 JS 프레임워크를 사용하는 것이 좋습니다. <BR><BR><BR>ul 및 ol 목록의 들여쓰기 문제<BR><BR>ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일은 list-style:none;margin:0px로 작성해야 합니다. ;padding:0px ;<br>margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다. ← 이 문장은 잘못 기재되어 있습니다. 자세한 내용은 ↓<br>를 참조하세요.[참고] 이 문제는 실제로 검증되지 않았으며 검증 후 수정될 예정입니다. <STRONG>[참고] IE에서는 margin:0px를 설정하면 목록의 위쪽, 아래쪽, 왼쪽 및 오른쪽 들여쓰기, 공백 및 목록 번호나 점을 제거할 수 있는 것으로 확인되었습니다. 패딩 설정은 스타일에 영향을 주지 않습니다. Firefox에서는 margin:0px만 설정합니다. padding:0px를 설정한 후에는 왼쪽 및 오른쪽 들여쓰기만 제거할 수 있습니다. 목록 번호나 점을 제거하려면 list-style:none도 설정해야 합니다. 즉, IE에서는 margin:0px만 설정하면 최종 효과를 얻을 수 있지만, Firefox에서는 margin:0px, padding:0px, list-style:none을 동시에 설정해야 최종 효과를 얻을 수 있습니다. <BR><BR>CSS 투명성 문제<BR><BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <br>FF:불투명도:0.6. <br>[참고] 둘 다 작성하고 아래에 불투명도 속성을 넣는 것이 가장 좋습니다. <STRONG><BR>CSS 둥근 모서리 문제<BR><BR>IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다. <br>FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -경계 반경-오른쪽 아래:4px;. <br>[참고] 둥근 모서리 문제는 CSS의 전형적인 문제입니다. 둥근 모서리를 설정하려면 JQuery 프레임셋을 사용하고 이러한 복잡한 문제는 다른 사람에게 맡기는 것이 좋습니다.</script>
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)
활성화: 선택 사항 . 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true: 기본값입니다. 필터가 활성화되었습니다. false: 필터가 비활성화됩니다.
크기 조정 방법: 선택 사항입니다. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방식을 설정하거나 검색합니다. 자르기: 개체 크기에 맞게 이미지를 자릅니다. 이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다. scale: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.
src: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.
firefox는 innerText를 지원할 수 없습니다
firefox는 innerHTML을 지원하지만 innerText는 지원하지 않습니다. innerText를 구현하기 위해 textContent를 지원하지만 기본적으로 추가 공백도 유지됩니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다.
웹 콘텐츠 선택 금지
일반적으로 IE에서는 js를 사용합니다: obj.onselectstart=function(){return false;}
Firefox는 CSS를 사용합니다:-moz-user -select:none
필터 지원(예: 투명도 필터)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10 ;
이벤트 캡처
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);
마우스 위치 가져오기
IE: event.clientX, event.clientY
firefox: 이벤트 함수는
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}
DIV 및 기타 이벤트 객체를 전달해야 합니다. 요소 테두리 문제
예: div의 CSS 설정: {width:100px;height:100px;border:#000000 1px solid;}
IE에서: div의 너비( 테두리 너비): 100px , div 높이(테두리 너비 포함): 100px
및 firefox: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함) ): 102px;
판단 브라우저 유형
var isIE=document.all ? true : false;
document.all 구문이 지원되는 경우 변수를 작성했습니다. isIE=true, 그렇지 않으면 isIE=false
다른 브라우저에서 CSS 처리
일반적으로 !important를 사용하여 CSS 문 사용의 우선순위를 지정할 수 있습니다(firefox에서만 지원)
예: {border-width:0px!important;border-width: 1px;}
Firefox에서는 이 요소에 테두리가 없지만 IE
문서에서는 테두리 너비가 1px입니다. formName.item("itemName") 문제
문제 참고: IE에서는 document.formName.item("itemName") 또는 Firefox에서 document.formName.elements ["elementName"]를 사용할 수 있습니다. document.formName.elements["elementName"]만 사용할 수 있습니다.
해결책: document.formName.elements["elementName"]를 균일하게 사용하세요.
컬렉션 개체 문제
문제 설명: IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만, Firefox에서는 []만 사용하여 컬렉션을 얻을 수 있습니다. 사물.
해결책: 컬렉션 개체를 얻으려면 []를 균일하게 사용하세요.
사용자 정의 속성 문제
문제 설명: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 가져오거나 getAttribute()를 사용하여 사용자 정의 속성을 가져올 수 있습니다. Firefox 이 상황에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.
eval("idName") 문제
문제 설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 ID가 있는 HTML을 가져올 수 있습니다. idName 개체; Firefox에서는 getElementById("idName")만 사용하여 id가 idName인 HTML 개체를 얻을 수 있습니다.
해결책: getElementById("idName")를 균일하게 사용하여 ID가 idName인 HTML 개체를 가져옵니다.
변수명이 HTML 객체의 ID와 동일한 문제
문제 설명: IE에서 HTML 객체의 ID를 하위 항목으로 직접 사용할 수 있음 문서의 개체 변수 이름이지만 Firefox에서는 사용할 수 없습니다. Firefox에서는 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하세요. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var 키워드를 추가하세요.
const 문제
문제 설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서 상수를 정의할 수 있지만 var 키워드만 사용하여 상수를 정의할 수 있습니다. .
해결책: var 키워드를 균일하게 사용하여 상수를 정의하세요.
Input.type 속성 문제
문제 설명: IE의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다.
해결책: input.type 속성을 수정하지 마세요. 수정해야 하는 경우 원래 입력을 먼저 숨긴 다음 동일한 위치에 새 입력 요소를 삽입할 수 있습니다.
window.event 문제
문제 설명: window.event는 IE에서만 실행되고 Firefox에서는 실행되지 않습니다. 이는 Firefox의 이벤트가 이벤트가 발생할 때만 실행될 수 있기 때문입니다. . 현장 사용을 위해.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고 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><br><STRONG>event.x 및 event.y 문제<BR>문제 설명: IE에서는 짝수 개체에 x 및 y 속성이 있지만 Firefox에서는 pageX 및 pageY 속성이 없습니다. 짝수 개체에는 pageX, pageY 속성이 있지만 x, y 속성은 없습니다. <BR>해결책: var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;<BR>질문 8을 고려한다면 대신 myEvent를 사용하세요. . <br><br><STRONG>event.srcElement 문제<BR>문제 설명: IE에서는 짝수 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. srcElement 속성이 없습니다. <BR>해결책: srcObj = event.srcElement ? event.srcElement : event.target;을 사용하세요. <BR>질문 8을 고려한다면 이벤트 대신 myEvent를 사용하세요. <br><br><STRONG>window.location.href 문제<BR>문제 설명: IE 또는 Firefox2.0.x에서는 window.location 또는 window.location.href를 사용할 수 있습니다. x 이 조건에서는 window.location만 사용할 수 있습니다. <BR>해결책: window.location.href 대신 window.location을 사용하세요. 물론 location.replace() 메서드 사용을 고려할 수도 있습니다. <br><br><STRONG>모달 및 비모달 창 문제<BR>문제 설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 열 수 있지만 이는 불가능합니다. . <BR>해결책: window.open(pageURL,name,parameters)을 직접 사용하여 새 창을 엽니다. <BR>자식 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 하위 창을 제어하기 위해 상위 창이 필요한 경우 var subWindow = window.open(pageURL,name,parameters);를 사용하여 새로 열린 창 개체를 가져옵니다. <br><br><STRONG>프레임 및 iframe 문제<BR>다음 프레임을 예로 들어 보겠습니다. <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) 프레임 객체에 액세스<BR>IE: 창 사용 .frameId 또는 window.frameName을 사용하여 이 프레임 객체에 액세스합니다. <BR>Firefox: 이 프레임 객체에 액세스하려면 window.frameName을 사용하세요. <BR>해결책: 이 프레임 객체에 액세스하려면 window.document.getElementById("frameId")를 동일하게 사용하세요. <br><br>(2) 프레임 콘텐츠 전환<BR>IE와 Firefox 모두에서 window.document.getElementById("frameId").src = "xxx.html" 또는 window.frameName.location = "를 사용할 수 있습니다. xxx.html"을 사용하여 프레임 내용을 전환합니다. <BR> 프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 프레임의 parent 키워드를 사용하여 상위 창에 액세스할 수 있습니다. <br><br><STRONG>본문 로딩 문제<BR>문제 설명: 브라우저가 body 태그를 완전히 읽기 전에 Firefox의 body 개체가 존재하지만 IE의 body 개체는 body 태그에 있어야 합니다. 브라우저가 완전히 읽을 때까지. <BR>[참고] 이 문제는 아직 검증되지 않았으며 검증 후 수정될 예정입니다. <BR>[참고] IE6, Opera9, FireFox2에서는 위의 문제가 없는 것으로 확인되었습니다. 요소가 로드되지 않은 경우에도 스크립트 이전에 로드된 모든 개체 및 요소에 간단한 JS 스크립트로 액세스할 수 있습니다. 아직. <br><br><STRONG>이벤트 위임 방법<BR>문제 설명: IE에서는 document.body.onload = inject를 사용합니다. 이전에 Firefox에서 inject() 함수가 구현된 경우 document.body를 사용합니다. .onload = inject();<BR>해결책: document.body.onload=new Function("inject()") 또는 document.body.onload = function()을 사용하세요.{/* 코드는 다음과 같습니다. */}<BR>[참고] Function과 function의 차이<br><br><STRONG>부모 요소에 접근하는 차이<BR>문제 설명: IE에서는 obj.parentElement 또는 obj.parentNode를 사용하여 부모 요소에 접근 obj의 노드, Firefox에서는 obj.parentNode를 사용하여 obj의 상위 노드에 액세스합니다. <BR>해결책: firefox와 IE는 모두 DOM을 지원하므로 obj.parentNode는 obj의 상위 노드에 액세스하는 데 균일하게 사용됩니다.<br><br><STRONG>커서:손 VS 커서:포인터<BR>문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 지침입니다. <BR>해결책: 포인터를 균일하게 사용하십시오. <br><br><STRONG>innerText 문제<BR>문제 설명: innerText는 IE에서는 정상적으로 작동하지만, innerText는 FireFox에서는 작동하지 않습니다. <BR>해결 방법: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하세요. <BR>예: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "내 텍스트";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[참고] innerHTML은 IE 및 Firefox와 같은 브라우저에서 지원됩니다. 즉, 사용하지 않는 것이 가장 좋습니다. <br><br><STRONG>객체 너비 및 높이 할당 문제<BR>문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 문이 잘못되었습니다. <BR>해결 방법: obj.style.height = imgObj.height "px"를 균일하게 사용하세요. IE에서는 tr을 추가하기 위해 js를 사용할 때 table 및 tr의 innerHTML 할당이 허용되지 않습니다. ,appendChild 메서드가 작동하지 않습니다. <br>해결책: <br>//테이블에 빈 행 추가: <STRONG>var row = otable.insertRow(-1);var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[참고] 저는 JS를 사용하여 테이블을 직접 조작하는 경우가 거의 없기 때문에 이런 문제를 겪은 적이 없습니다. . 테이블을 운영하려면 JQuery와 같은 JS 프레임워크를 사용하는 것이 좋습니다. <BR><BR><BR>ul 및 ol 목록의 들여쓰기 문제<BR><BR>ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일은 list-style:none;margin:0px로 작성해야 합니다. ;padding:0px ;<br>margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다. ← 이 문장은 잘못 기재되어 있습니다. 자세한 내용은 ↓<br>를 참조하세요.[참고] 이 문제는 실제로 검증되지 않았으며 검증 후 수정될 예정입니다. <STRONG>[참고] IE에서는 margin:0px를 설정하면 목록의 위쪽, 아래쪽, 왼쪽 및 오른쪽 들여쓰기, 공백 및 목록 번호나 점을 제거할 수 있는 것으로 확인되었습니다. 패딩 설정은 스타일에 영향을 주지 않습니다. Firefox에서는 margin:0px만 설정합니다. padding:0px를 설정한 후에는 왼쪽 및 오른쪽 들여쓰기만 제거할 수 있습니다. 목록 번호나 점을 제거하려면 list-style:none도 설정해야 합니다. 즉, IE에서는 margin:0px만 설정하면 최종 효과를 얻을 수 있지만, Firefox에서는 margin:0px, padding:0px, list-style:none을 동시에 설정해야 최종 효과를 얻을 수 있습니다. <BR><BR>CSS 투명성 문제<BR><BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <br>FF:불투명도:0.6. <br>[참고] 둘 다 작성하고 아래에 불투명도 속성을 넣는 것이 가장 좋습니다. <STRONG><BR>CSS 둥근 모서리 문제<BR><BR>IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다. <br>FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -경계 반경-오른쪽 아래:4px;. <br>[참고] 둥근 모서리 문제는 CSS의 전형적인 문제입니다. 둥근 모서리를 설정하려면 JQuery 프레임셋을 사용하고 이러한 복잡한 문제는 다른 사람에게 맡기는 것이 좋습니다.</script>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.