IE와 FireFox의 js와 css의 차이점에 대한 아주 좋은 기사 [Reprinted from Catching Fire]_Experience exchange

블루에서 이 글을 봤는데, 글쓴이가 잘 요약한 것 같은 느낌이 들었습니다. 적어도 제가 전혀 알지 못했던 부분도 있습니다. 이런 것들은 꼭 요약해야 하는데 아쉽게도 저는 게으른 사람이어서 학습을 돕기 위해 여기에 모았습니다!

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:filter: alpha(opacity=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){
　🎜>
6.DIV 및 기타 요소의 경계 문제:

예: div의 CSS 설정: {width:100px;height:100px;border:#000000 1px solid;} IE Medium: div 너비(테두리 너비 포함): 100px, height of div(테두리 너비 포함): 100px;
그리고 Firefox: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함): 102px

그래서 만들 때; IE 및 Firefox와 호환되는 이 드래그 창을 사용하려면 js 및 css를 작성할 때 머리를 써야 합니다. 다음은 두 가지 팁입니다.

브라우저 유형 결정:
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에서는 테두리 너비가 1px입니다.


XHTML과 일반 JS 및 CSS의 여러 차이점

웹 페이지에서 처음에 이 코드를 추가하는 것이 소위 XHTML 표준입니다.


XHTML 표준에 따른 몇 가지 차이점: nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">1.document.documentElement 및 document.body
코드에서 페이지의 CSS 설정 반드시 사용: document.documentElement
예: document.documentElement.style.overflow='hidden';
overflow-X, Overflow-Y, 이 두 좌표 속성은 XHTML에서 지원되지 않습니다.

2. 웹 페이지 창 영역 및 스크롤 막대 변위 거리를 얻을 때 사용됩니다.
즉, 이 네 가지 속성(clientWidth, clientHeight, scrollLeft, scrollTop)은 document.documentElement를 사용해야 합니다.
그러나 document.body.appendChild() 및 document .body.removeChild()를 사용할 수 있지만 대신 document.documentElement.appendChild() 및 document.documentElement.removeChild()를 사용하면 오류가 보고됩니다.

요약 Document.documentElement는 clientWidth, clientHeight에만 사용됩니다. , scrollLeft, scrollTop 및 document.documentElement.style

3. 이 표준을 추가한 후 IE의 테두리 문제도 변경되었으며 이제 Firefox와 일치합니다. 이것이 크로스 브라우저라는 장점입니다. 위에서 언급한 표준
:
div의 CSS 설정:: {width:100px;height:100px;border:#000000 1px solid;}
IE(일반 상황): div 너비(경계 포함) 너비): 100px, div 높이(테두리 너비 포함): 100px;
firefox(일반 상황):: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함): 102px; 🎜>XHTML 표준 추가 후(IE와 Firefox가 조정됨, ^_^):
IE(XHTML): div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함): 102px; >firefox (XHTML):: div 너비(테두리 너비 포함): 102px, div 높이(테두리 너비 포함): 102px;