WEB 브라우저 호환 권장 collection_javascript 기술
- WBOY원래의
- 2016-05-16 18:27:11989검색
반드시 완전하지는 않으며 일부 정확하지 않을 수 있습니다. 예를 들어 새로 출시된 IE8, Chrome 등은 많이 다루지 않습니다. 최근 일부 프로젝트는 IE8, Chrome 등과도 호환되지만 요약하지 않았습니다. 나중에 잊어 버렸습니다 ... 땀. 함께 천천히 개선해 봅시다.
javascript 부분
1. document.form.item 문제
문제:
document.formName.item이 코드("itemName")는 FF
에서 실행할 수 없습니다. 해결 방법:
대신 document.formName.elements["elementName"]를 사용하세요. 2. 컬렉션 개체 관련 문제
문제:
코드의 많은 컬렉션 개체는 액세스할 때 ()를 사용합니다. 해결 방법: 대신 다음 표준 산술 연산으로 []를 사용합니다. 예:
document.getElementsByName ("inputName")(1)이
document.getElementsByName("inputName")[1]
으로 변경되었습니다. 3. 문제: window.event를 사용하면 FF에서 실행할 수 없습니다
해결책:
FF의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있습니다. 이 문제는 아직 해결되지 않았습니다. 이벤트를 함수에 전달하면 이 문제를 해결할 수 있습니다. onMouseMove = "functionName(event)"function functionName (e) {
e = e || window.event;
.. ... .
}
4. HTML 개체의 ID를 개체 이름으로 사용하는 문제
문제:
IE에서 HTML 개체를 문서의 하위 개체로 사용할 수 있습니다. 변수 이름은 직접 사용되며 FF에서는 사용할 수 없습니다.
해결 방법:
개체 변수를 사용할 때 모두 표준 getElementById("idName") 5. idName 문자열을 사용하여 개체 가져오기 문제
문제:
IE에서는 eval("idName")을 사용하여 id가 있는 HTML 개체를 가져올 수 있습니다. idName은 있지만 FF에는 없습니다
해결책:
eval("idName") 대신 getElementById("idName ")를 사용하세요.
6. HTML 개체 ID
문제:
FF에서는 개체 ID가 작동하지 않기 때문에 HTML 개체 이름을 사용하면 HTML 개체 ID와 동일한 변수 이름을 사용할 수 없습니다. IE에서
해결 방법:
변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가하세요. 이는 IE에서도 정상적으로 작동합니다.
을 실행할 때는 HTML 개체 ID와 동일한 변수 이름을 사용하지 않는 것이 가장 좋습니다. 오류를 줄이기 위해
7. event.x 및 event.y 문제
문제:
IE에서 이벤트 개체에 x, y 속성이 있지만 해결 방법:
FF에서는 event.x에 해당하는 것이 event.pageX이지만 IE에서는 event.pageX에
가 없습니다. 따라서 event.x 대신 event.clientX가 사용됩니다. IE
event.clientX와 event.pageX에도 이 변수가 있습니다. 즉, 스크롤 막대 는 다음과 같이 동일해야 합니다. mX = event.x ? event.x : event.pageX;
그럼 event.x 대신 mX를 사용하세요
8. 프레임 문제에 대해
:
IE window.testFrame에서 사용하면 프레임을 가져오지만 FF에서는 작동하지 않습니다.
해결책:
window.top.document.getElementById("testFrame").src = 'xx.htm'
window .top.frameName.location = 'xx.htm'
9. 요소의 속성 가져오기
FF에서 정의한 속성은 getAttribute()를 통해 가져와야 합니다. 🎜>
10. FF에는 parentElement, parement.children이 없지만 parentNode, parentNode.childNodes
문제:
childNodes의 첨자의 의미가 IE와 FF에서 다릅니다. . 빈 텍스트 노드는 FF의 childNodes에 삽입됩니다. 해결책: node.getElementsByTagName()을 통해 이 문제를 피할 수 있습니다.
문제:
html의 노드가 누락되면 IE 및 FF는 parentNode를 다르게 해석합니다. 예:
FF의 input.parentNode 값은 form인 반면 IE의 input.parentNode 값은 빈 노드입니다.
문제:
FF의 노드에 자체 노드가 없습니다. RemoveNode 메소드
해결책:
다음 메소드를 사용해야 합니다 node.parentNode.removeChild(node)
11. const 문제
문제:
const 키워드는 IE에서 사용할 수 없습니다
해결책:
를 var 12로 바꾸세요. 본문 개체
본문 태그를 완전히 읽기 전에 FF의 본문이 존재합니다. IE는 반드시 본문을 완전히 읽은 후에만 존재해야 합니다.
이로 인해 IE에서 문서가 로드되지 않을 때 본문에 자식을 추가할 때 빈 페이지가 나타나는 문제가 발생합니다.
해결 방법:
본문에 모든 것을 삽입합니다. 노드 작업은 모두 onload 후에 수행됩니다.
13.url 인코딩
문제:
일반적으로 FF는 js에서 &
을 인식할 수 없습니다. :
js에서 url을 작성한다면 그냥 쓰고 쓰지 마세요& 그런데 textNode에는 tagName 값이 없습니다. IE에서는 nodeName 사용에 문제가 있습니다
해결책:
tagName을 사용하세요. 비어 있는지 확인해야 합니다
15. 요소 속성
IE의 input.type 속성은 읽기 전용이지만 FF에서는 수정이 가능합니다
16. document.getElementsByName() 및 document.all[name] 관련 문제:
IE에서는 getElementsByName() 또는 document.all[name]을 사용하여 얻을 수 없습니다. div 요소
얻을 수 없는 다른 요소가 있는지는 알 수 없습니다(이 문제는 여전히 논란의 여지가 있으며 연구 중입니다) )
17. 또는 다른 프레임
IE에서는 다음 방법을 사용하여 하위 요소
document.getElementById ("frameName").(document.)elementName
window.frames의 값을 가져올 수 있습니다. ["frameName"].elementName
을 IE와 호환되는 FF에서 실행하려면 다음 형식으로 변경해야 합니다. window.frames[ "frameName"].contentWindow.document.elementNamewindow .frames["frameName"].document.elementName
18. 개체 너비 및 높이 할당 문제
문제:
obj.style.height = imgObj와 유사한 문. FireFox의 높이가 유효하지 않습니다
해결책:
obj.style.height = imgObj.height "px"를 균일하게 사용합니다.
19. innerText 문제
문제:
innerText는 IE에서 정상적으로 작동하지만 innerText는 FireFox에서 작동하지 않습니다.
해결 방법:
IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하세요.
20. and event.toElement
문제:
IE에서는 짝수 객체에 srcElement 속성이 있지만, Firefox에서는 짝수 객체에 대상 속성이 있지만 srcElement 속성이 없습니다.
해결책:
var source = e.target || e.srcElement;var target = e.관련Target || e.toElement;
21. >
문제:
CSS로 FF를 비활성화해야 하고, JS로 IE를 비활성화해야 합니다.
해결책:
IE: obj.onselectstart = function() {return false ;}
FF : -moz-user-select:none;
22. 이벤트 캡처
문제:
FF에 setCapture() 또는 releaseCapture() 메서드가 없습니다.
해결책 :
IE:
obj.setCapture(); obj.releaseCapture();FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
window. releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event .MOUSEMOVE|Event. MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event .MOUSEUP);
}
CSS 부분
div 클래스
1. 센터링 문제
Div의 콘텐츠는 기본적으로 IE에서 중앙에 정렬되고 FF는 기본적으로 왼쪽 정렬됩니다. 코드 margin:auto를 추가해 볼 수 있습니다
2. 높이 문제 두 div가 서로 위에 배열되거나 중첩됩니다. 위쪽 div는 높이(높이)를 설정합니다. div의 실제 콘텐츠가 설정된 높이보다 크면 IE에서는 두 div가 겹칩니다. 아래쪽 div는 자동으로 위쪽 div를 위한 공간을 만듭니다.
따라서 레이어가 겹치는 것을 방지하려면 높이를 적절하게 조절하거나 단순히 높이를 쓰지 않고 자동으로 조정되도록 하는 것이 좋습니다. height:100%;
그러나 이 div의 첫 번째 수준 요소가 모두 부동이면 div 블록 끝과 닫기 전에 바닥이 움푹 들어간 빈 div를 추가해야 합니다.
.float_bottom {clear:both; height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both;
float의 영향을 받지 않으려면 그냥clear:both;
라고 작성하세요.4.
#box {float:left;
width:100px;
margin:0 0 0 100px; //이 경우 IE는 200px 거리를 생성합니다
display :inline; //float 무시 }
5. 패딩 문제
FF가 패딩을 설정한 후 div는 높이와 너비를 늘리지만 IE는 그렇지 않습니다. (* 표준 XHTML1.0 정의 dtd는 일관성이 있는 것 같습니다.)
높이를 적절히 조절하거나 height:100%를 사용해 보세요;
너비를 줄이려면 패딩을 사용하세요
그러나 실제 경험에 따르면 일반적으로 FF와 IE의 패딩 사이에는 큰 차이가 없습니다. . div의 실제 너비 = 너비 패딩이므로 div의 전체 너비와 패딩을 작성하고 너비는 실제 원하는 너비에서 패딩을 빼서 정의됩니다
6. div가 중첩된 경우의 y축
FF의 y 축의 하위 div와 상위 div 사이의 거리는 IE에서 하위 div와 상위 div 사이의 거리입니다. y축은 상위 패딩입니다. IE에서는 하위 div와 상위 div 사이의 거리가 상위 패딩과 하위 여백 중 더 큽니다. 그리고 border=0인 경우 하위 div와 상위 div 사이의 거리는 0입니다. , 하위 여백은 상위 div 외부에서 작동합니다
7. 패딩, 여백, 높이, 너비에 대한 어리석은 솔루션
이것은 방법이 아니라 기술입니다. 표준 헤더 작성
패딩을 최대한 높게 사용, 여백 사용 주의, 높이 100% 추가 시도, 부모 높이 고정 값 자식 높이가 있는 경우, 100%를 사용하지 마십시오. 모든 자식이 부동 상태인 경우 하단에 빈 공간을 추가하십시오. 지우기: 두 div 모두 는 최대한 넓어야 하며 패딩을 신중하게 사용하고 너비를 빼십시오. 🎜>
리스트 클래스
1. FF에서는 ul 태그에 기본적으로 패딩 값이 있지만 IE에서는 margin에만 값이 있습니다
ul 먼저 정의 {margin:0;padding:0;}
2. ul 및 ol 목록의 들여쓰기 문제
ul, ol 및 기타 목록의 들여쓰기를 제거하면 스타일은 다음과 같이 작성해야 합니다: { list-style:none;margin:0px;padding:0px;}
디스플레이 클래스
1. ,두 개의 요소를 인라인
display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다display:inline; //같은 행에 배열되는 효과 달성display:table; //FF의 경우 테이블 효과
display:block 블록 요소의 특성은 다음과 같습니다.
항상 새 줄에서 시작
높이, 줄 높이 및 위쪽 및 아래쪽 여백을 제어할 수 있습니다.
기본 너비는 너비를 설정하지 않는 한 컨테이너의 100%입니다.
,
,
,
및