1. Firefox는 내 텍스트를 지원할 수 없습니다.
Firefox는 InnerHTML을 지원하지만 InnerText를 지원하지 않습니다. TextContent를 지원하여 내 텍스트를 구현하지만 불필요한 공간도 기본적으로 보존됩니다. TextContent를 사용하지 않으면 문자열에 HTML 코드가 포함되어 있지 않은 경우 InnerHTML을 대신 사용할 수도 있습니다.
2. 웹 페이지 컨텐츠를 선택하는 것은 금지되어 있습니다.
IE에서 js는 일반적으로 사용됩니다 : obj.onselectstart = function () {return false;}
Firefox는 CSS를 사용합니다 : -Moz-User-Select : None
3. 필터 지지대 (예 : 투명 필터) :
IE : 필터 : 알파 (불투명도 = 10);
Firefox : -Moz-opacity : .10;
4. 이벤트 캡처 :
즉 : 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) {
x = ev.pagex; y = ev.pagey;
}
6. div와 같은 요소의 경계 문제 :
예를 들면 : DIV의 CSS를 설정 :: {너비 : 100px; 높이 : 100px; 테두리 :#000000 1px solid;}
IE : DIV의 너비 (경계 너비 포함) : 100px, DIV의 높이 (경계 너비 포함) : 100px;
및 Firefox : DIV의 너비 (테두리 너비 포함) : 102px, DIV의 높이 (경계 너비 포함) : 102px;
따라서 IE 및 Firefox와 호환되는이 드래그 윈도우를 수행 할 때는 뇌를 사용하여 J와 CSS를 작성하고 두 가지 팁을 제공해야합니다.
1. 브라우저 유형 결정 :
var isie = document.all? 사실 : 거짓;
문서를 작성하면 변수를 썼습니다. all 구문이 지원되면 isie = true, 그렇지 않으면 isie = false
2. 다른 브라우저에서 CSS 처리 :
일반적으로 CSS 진술을 우선 순위를 정하기 위해 중요합니다 (Firefox에서만 지원).
예를 들면 다음과 같습니다. {Border-Width : 0px! 중요; Border-Width : 1px;}
Firefox 아래 에서이 요소는 테두리가 없으며 즉, IE에서 테두리 너비는 1px입니다.
1.document.formname.item ( "ItemName") 문제
문제 설명 : IE에서는 document.formname.item ( "itemName") 또는 docum Firefox에서는 document.formname.elements [ "elementName"] 만 사용할 수 있습니다.
솔루션 : Unified 방식으로 document.formname.elements [ "Emplicname"]를 사용하십시오.
2. 수집 객체 문제
문제 설명 : IE에서는 () 또는 []를 사용하여 컬렉션 클래스 객체를 얻을 수 있습니다. Firefox에서는 []를 사용하여 컬렉션 클래스 객체를 얻을 수 있습니다.
솔루션 : []를 사용하여 통일 된 방식으로 수집 클래스 객체를 얻습니다.
3. 사용자 정의 속성 문제
문제 설명 : 즉, 정기적 인 속성을 얻기 위해 정기 속성을 얻는 방법을 사용하거나 getAttribute ()를 사용하여 사용자 정의 속성을 얻을 수 있습니다. Firefox에서는 getAttribute () 만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결 방법 : getAttribute ()를 통해 균일하게 사용자 정의 속성을 얻습니다.
4.eval ( "idname") 문제
문제 설명 : IE에서는 Eval ( "Idname") 또는 getElementByid ( "idname")를 사용하여 idname을 가진 html 객체를 얻을 수 있습니다. Firefox에서는 getElementById ( "idname") 만 사용하여 idname으로 HTML 객체를 얻을 수 있습니다.
솔루션 : getElementByid ( "idname")를 사용하여 idname으로 id를 가진 html 객체를 얻습니다.
5. HTML 객체 ID와 동일한 변수 이름의 문제
문제 설명 : 즉, HTML 객체의 ID는 문서의 하위 객체의 변수 이름으로 직접 사용할 수 있지만 Firefox에서는 직접 사용할 수 있습니다. Firefox에서는 HTML 객체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다.
해결 방법 : document.idname 대신 document.getElementByid ( "idname")를 사용하십시오. 오류를 줄이기 위해 동일한 HTML 객체 ID를 가진 가변 이름을 가져 가지 않는 것이 가장 좋습니다. 변수를 선언 할 때는 모호성을 피하기 위해 VAR 키워드를 추가하십시오.
6. 최신 문제
문제 설명 : Firefox에서는 Const 키워드 또는 VAR 키워드를 사용하여 상수를 정의 할 수 있습니다. 즉, VAR 키워드를 사용하여 상수를 정의 할 수 있습니다.
해결책 : VAR 키워드를 사용하여 상수를 균일하게 정의하십시오.
7. 입력. 타입 속성 문제
문제 설명 : IE의 입력 속성은 읽기 전용입니다. 그러나 Firefox의 입력 속성은 읽기 쓰기입니다.
해결책 : 입력을 수정하지 마십시오. 이를 수정 해야하는 경우 먼저 원래 입력을 숨기고 동일한 위치에 새 입력 요소를 삽입 할 수 있습니다.
8. window.event 문제
문제 설명 : Window.Event는 Firefox가 아닌 IE에서만 실행할 수 있습니다. Firefox 이벤트는 이벤트가 발생하는 장면에서만 사용할 수 있기 때문입니다.
솔루션 : 이벤트가 발생하는 기능에 이벤트 매개 변수를 추가하고 var myevent = evt? evt : (window.event? window.event : null)를 사용하십시오.
예:
코드 사본은 다음과 같습니다.
<input type = "button"onclick = "dosomething (event)"/>
<script language = "javaScript">
함수 dosomething (evt) {
var myevent = evt? evt : (Window.event? Window.event : null)
...
}
9. event.x 및 event.y 문제
문제 설명 : 즉, 짝수 객체에는 x 및 y 속성이 있지만 pagex 및 pagey 속성은 없습니다. 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 문제
문제 설명 : 즉, 짝수 객체에는 srcelement 속성이 있지만 대상 속성은 없습니다. Firefox에서 짝수 객체에는 대상 특성이 있지만 srcelement 속성은 없습니다.
해결책 : srcobj = event.srcelement를 사용합니까? event.srcelement : event.target;
8 번째 문제를 고려하면 이벤트 대신 Myevent를 사용하십시오.
11.window.location.href 문제
문제 설명 : IE 또는 Firefox2.0.x에서는 Window.Location 또는 Window.location.href를 사용할 수 있습니다. Firefox1.5.x에서는 Window.location 만 사용할 수 있습니다.
해결 방법 : Window.location.href 대신 Window.location을 사용하십시오. 물론 location.replace () 메소드를 사용하는 것도 고려할 수도 있습니다.
12. 모달 및 비 모달 창 문제
문제 설명 : 즉, 모달과 비 모달 창문은 showmodaldialog 및 showmodelessDialog를 통해 열 수 있습니다. Firefox에서는 할 수 없습니다.
솔루션 : Window.open (PageUrl, 이름, 매개 변수)을 사용하여 새 창을 열십시오.
자식 창의 매개 변수를 상위 창으로 다시 전달 해야하는 경우 Child Window에서 Window.opener를 사용하여 부모 창에 액세스 할 수 있습니다. 상위 창이 자식 창을 제어 해야하는 경우 var subwindow = window.open (pageurl, name, parameters)을 사용하십시오. 새로 열린 창 객체를 얻으려면.
13. 프레임 및 iframe 문제
다음 프레임이 예입니다.
<frame src = "xxx.html"id = "frameid"name = "framename" />
(1) 액세스 프레임 개체
IE : Window.FrameID 또는 Window.FramEname을 사용 하여이 프레임 객체에 액세스하십시오.
Firefox : window.framename을 사용 하여이 프레임 객체에 액세스하십시오.
솔루션 : Window.Document.GetElementById ( "FrameId")를 사용 하여이 프레임 객체에 액세스하십시오.
(2) 프레임 컨텐츠 스위치
IE와 Firefox 모두에서 Window.document.getElementById ( "frameid"). src = "xxx.html"또는 Window.framename.location = "xxx.html"을 사용할 수 있습니다.
프레임의 매개 변수를 상위 창으로 다시 전달 해야하는 경우 프레임의 상위 키워드를 사용하여 부모 창에 액세스 할 수 있습니다.
14. 신체 로딩 문제
문제 설명 : Body 태그가 브라우저에서 완전히 읽기 전에 Firefox의 신체 물체가 존재합니다. 바디 태그가 브라우저에서 완전히 읽은 후에 IE의 신체 물체가 존재해야합니다.
[참고]이 문제는 아직 확인되지 않았으며 확인 후 수정됩니다.
[참고] 위의 문제는 IE6, Opera9 및 Firefox2에 존재하지 않는다는 것이 입증되었습니다. 간단한 JS 스크립트는이 요소가 아직로드되지 않은 경우에도 스크립트 전에로드 된 모든 객체와 요소에 액세스 할 수 있습니다.
15. 이벤트 대의원 방법
문제 설명 : IE에서는 document.body.onload = Inject를 사용하십시오. 여기서 기능 inject ()가 구현 된 경우; Firefox에서 document.body.onload = inject ()를 사용하십시오.
솔루션 : document.body.onload = new 함수 ( 'inject ()'); 또는 document.body.onload = function () {/* 여기 코드가 있습니다*/}
[참고] 기능과 기능의 차이
16. 접근 된 부모 요소의 차이
문제 설명 : 즉, obj.parentElement 또는 obj.parentNode를 사용하여 OBJ의 상위 노드에 액세스하십시오. Firefox에서 obj.parentNode를 사용하여 OBJ의 상위 노드에 액세스하십시오.
솔루션 : Firefox와 IE가 모두 DOM을 지원하기 때문에 OBJ.ParentNode는 OBJ의 상위 노드에 액세스하는 데 사용됩니다.
17. Cursor : 핸드 대 커서 : 포인터
문제 설명 : Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 모양의 지표입니다.
해결책 : 통일 된 방식으로 포인터를 사용하십시오.
18. 내 텍스트 문제.
문제 설명 : IE에서 내부 텍스트가 올바르게 작동하지만 내부 텍스트는 Firefox에서는 작동하지 않습니다.
해결 방법 : 비 EIE 브라우저에서 내부 텍스트 대신 TextContent를 사용하십시오.
예:
코드 사본은 다음과 같습니다.
if (navigator.appname.indexof ( "Explorer")> -1) {
document.getElementById ( 'element'). innerText = "내 텍스트";
} 또 다른{
document.getElementById ( 'element'). textContent = "내 텍스트";
}
[참고] InnerHTML은 IE 및 Firefox와 같은 브라우저에서 지원됩니다. Outerhtml과 같은 다른 사람들은 IE에 의해서만 지원되므로 사용하지 않는 것이 가장 좋습니다.
19. 객체 너비 및 높이 할당 문제
문제 설명 : obj.style.height = imgobj.height in firefox와 유사한 진술은 유효하지 않습니다.
솔루션 : OBJ.style.height = imgobj.height + 'px'를 사용하여 균일하게 사용하십시오.
20. 테이블 작동 문제
문제 설명 : 즉, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 가지고 있습니다. 즉, 내부 html 값을 테이블 및 tr에 할당 할 수 없습니다. JS를 사용하는 경우 AppendChild 메소드를 사용하는 것은 작동하지 않습니다.
해결책:
코드 사본은 다음과 같습니다.
// 테이블에 빈 줄을 추가합니다.
var row = otable.insertrow (-1);
var cell = document.createelement ( "TD");
cell.innerhtml = "";
cell.classname = "xxxx";
Row.appendChild (셀);
[참고] JS를 사용하여 테이블을 직접 작동하지 않기 때문에이 문제를 해결 한 적이 없습니다. JS 프레임 워크 세트를 사용하여 jQuery와 같은 테이블을 조작하는 것이 좋습니다.
21. UL 및 OL 목록의 발급 문제
UL, OL 등과 같은 목록의 압입을 제거 할 때 스타일은 다음과 같이 작성해야합니다. 목록 스타일 : 없음; 여백 : 0px; 패딩 : 0px;
마진 속성은 IE에 유효하며 패딩 속성은 Firefox에 유효합니다. ←이 문장은 잘못되었습니다. 자세한 내용은 참조하십시오. ↓
[참고]이 문제는 아직 확인되지 않았으며 확인 후 수정됩니다.
[참고] IE에서는 마진을 설정하는 것으로 입증되었습니다. 0px는 왼쪽과 오른쪽의 왼쪽과 오른쪽 들여 쓰기, 빈, 목록 번호 또는 점 목록을 제거 할 수 있으며 패딩 설정은 스타일에 영향을 미치지 않습니다. Firefox에서 마진 설정 : 0px는 위아래로 화이트 스페이스 만 제거 할 수 있으며 패딩을 설정 한 후 0px는 왼쪽과 오른쪽의 인기를 제거 할 수 있으며 목록 번호 또는 점을 제거하려면 목록 스타일도 설정해야합니다. 다시 말해, 즉, 즉 단순히 마진 : 0px, 패딩 : 0px 및 목록 스타일을 설정하여 최종 효과를 달성 할 수 있습니다. 최종 효과를 달성하려면 Firefox에서 동시에 설정하지 않아야합니다.
22. CSS 투명성 문제
IE : 필터 : progid : dximagetransform.microsoft.alpha (style = 0, 불투명도 = 60).
FF : 불투명도 : 0.6.
[참고] 두 가지를 모두 작성하고 불투명 속성을 아래에 넣는 것이 가장 좋습니다.
23. CSS 둥근 코너 문제
IE : IE7의 다음 버전은 둥근 모서리를 지원하지 않습니다.
FF : -Moz-Border-Radius : 4px, 또는-Moz-Border-Radius-topleft : 4px; -Moz 국경 Radius-topright : 4px; -Moz 국경 Radius-Bottomleft : 4px; -Moz Border-Radius-Bottomright : 4px;.
[참고] 둥근 코너 문제는 CSS의 고전적인 문제입니다. jQuery 프레임 워크를 사용하여 둥근 모서리를 설정하여 다른 사람들이 생각할 수있는 복잡한 문제를 남기는 것이 좋습니다.
CSS에 대한 질문이 너무 많으며 동일한 CSS 정의조차도 페이지 표준이 다른 디스플레이 효과를 갖습니다. 적절한 제안은 페이지가 표준 DHTML 표준으로 작성되었으며 테이블 사용은 거의 사용되지 않는다는 것입니다. CSS 정의는 가능한 한 표준 DOM을 기반으로해야하며 IE, Firefox 및 Opera와 같은 주류 브라우저도 고려됩니다. BTW는 대부분의 경우 FF 및 오페라의 CSS 해석 표준이 CSS 표준에 더 가깝고 표준화되어 있습니다.