IE와 Firefox_PHP 튜토리얼 간의 일반적인 호환성 문제

　1. document.form.item 문제

(1) 기존 문제:

기존 코드에는 document.formName.item("itemName")과 같이 Firefox에서 실행할 수 없는 문이 많이 있습니다.

(2) 해결책:

대신 document.formName.elements["elementName"]

을 사용하세요.

　2. 수집 개체 문제

(1) 기존 문제:

기존 코드의 많은 컬렉션 개체에 액세스할 때 ()를 사용하지만, Firefox는 이를 허용하지 않습니다.

(2) 해결책:

대신 []를 아래 첨자 연산으로 사용하세요. 예:

　document.forms("formName")이 document.forms["formName"]으로 변경되었습니다.

또 다른 예:

　document.getElementsByName("inputName")(1)이 document.getElementsByName("inputName")[1]으로 변경되었습니다.

　3.window.event

(1) 기존 문제:

Firefox에서는 window.event를 사용할 수 없습니다.

(2) 해결책:

Firefox의 이벤트는 이벤트가 발생한 현장에서만 사용할 수 있습니다. 이 문제는 아직 해결되지 않았습니다. 다음과 같이 변경할 수 있습니다.

원본 코드(IE에서 실행 가능):

　

...

새 코드(IE 및 Firefox에서 작동):

　
...

또한, 새 코드의 첫 번째 줄이 변경되지 않고 이전 코드와 동일한 경우(즉, gotoSubmit 호출이 매개변수를 제공하지 않음) IE에서만 실행되지만 오류는 발생하지 않습니다. 발생하다. 따라서 이 솔루션의 tpl 부분은 여전히 ​​이전 코드와 호환됩니다.

　4. HTML 객체의 id를 객체명으로 사용하는 문제

　(1)기존 문제

　IE에서는 HTML 객체의 ID를 문서의 하위 객체의 변수명으로 직접 사용할 수 있습니다. 파이어폭스에는 없습니다.

　(2)해결책

객체 변수로 idName 대신 getElementById("idName")를 사용하세요.

　5. idName 문자열을 이용한 객체 획득 문제

　(1)기존 문제

IE에서는 eval(idName)을 사용하여 ID가 ​​idName인 HTML 개체를 가져올 수 있지만 Firefox에서는 그렇지 않습니다.

　(2)해결책

eval(idName) 대신 getElementById(idName)를 사용하세요.

　6. 변수명이 HTML 객체의 ID와 같은 문제

　(1)기존 문제

Firefox에서는 개체 ID를 HTML 개체 이름으로 사용하지 않기 때문에 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 작동하지 않습니다.

　(2)해결책

변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가해야 IE에서 정상적으로 실행될 수 있습니다.

또한 오류를 줄이기 위해 HTML 개체 ID와 동일한 변수 이름을 사용하지 않는 것이 가장 좋습니다.

7. Event.x 및 event.y 문제

(1)기존 문제

IE에서는 이벤트 객체에 x, y 속성이 있지만 Firefox에서는 그렇지 않습니다.

(2)해결책

Firefox에서 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를 사용하세요.

(3)기타

event.layerX는 IE와 Firefox에 존재합니다. 구체적인 차이점이 있는지는 아직 테스트되지 않았습니다.

8. 프레임 소개

(1)기존 문제

IE에서는 window.testFrame을 사용하여 프레임을 얻을 수 있지만 Firefox에서는 그렇지 않습니다.

(2)해결책

프레임 사용에 있어서 Firefox와 IE의 주요 차이점은 다음과 같습니다.

프레임 태그에 다음 속성을 쓰는 경우:

그러면 IE는 id나 name을 통해 이 프레임에 해당하는 window 객체에 접근할 수 있는 반면, Firefox는 name을 통해서만 이 프레임에 해당하는 window 객체에 접근할 수 있습니다. 이 창 개체에 액세스하려면 window.top.frameId 또는 window.top.frameName을 방문하세요.

Firefox: 이 창 개체는 window.top.frameName을 통해서만 액세스할 수 있습니다

또한 Firefox와 IE 모두에서 window.top.document.getElementById("frameId")를 사용하여 프레임 태그에 액세스할 수 있으며 window.top.document.getElementById("testFrame").src = 'xx .htm'을 사용하여 프레임 내용을 전환할 수도 있고, window.top.frameName.location ='xx.htm'을 통해 프레임 내용을 전환할 수도 있습니다. 프레임 및 창에 대한 설명은 '창 및 프레임'을 참조하세요. ' /test_frame/ 디렉토리 아래의 bbs 및 /test/js 테스트 기사

9. Firefox에서는 정의한 속성을 getAttribute()로 가져와야 합니다.

10. Firefox에는 parentElement parement.children이 없지만

parentNode parentNode.childNodes IE와 Firefox에서는 childNodes의 첨자의 의미가 다릅니다. Firefox는 DOM 사양을 사용하며 빈 텍스트 노드가 childNodes에 삽입됩니다.

일반적으로 이 문제는 node.getElementsByTagName()을 통해 피할 수 있습니다.

html에서 노드가 누락되면 IE와 Firefox는 parentNode를 다르게 해석합니다. 예를 들어

테이블>
양식>
Firefox의 input.parentNode 값은 form인 반면, IE의 input.parentNode 값은 빈 노드입니다

Firefox에는 노드에 대한 RemoveNode 메소드가 없습니다. 다음 메소드 node.parentNode.removeChild(node)를 사용해야 합니다

11.const 문제

(1)기존 질문:

IE에서는 const 키워드를 사용할 수 없습니다. const constVar = 32; 이는 IE의 구문 오류입니다.

(2)해결책:

const를 사용하지 말고 대신 var를 사용하세요.

12. 신체 개체

Firefox의 본문은 브라우저가 본문 태그를 완전히 읽기 전에 존재하지만, IE의 본문은 본문을 완전히 읽은 후에 존재해야 합니다.

13. URL 인코딩

js에서 URL을 작성하는 경우 직접 작성하고 작성하지 마세요. 예를 들어 var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; 그러면 그럴 가능성이 매우 높습니다. url이 정상적으로 표시되지 않고, 매개변수가 제대로 표시되지 않는다는 점입니다. 서버에 올바르게 전송되지 않으면 서버는 일반적으로 매개변수를 찾을 수 없다는 오류를 보고합니다. 물론, 매개변수가 있는 경우는 예외입니다. tpl에서는 tpl이 xml 사양을 준수하고 &를 &로 작성해야 하기 때문에 일반적으로 Firefox는 js에서 &

를 인식할 수 없습니다.

14. nodeName 및 tagName 문제

(1)기존 질문:

Firefox에서는 모든 노드에 nodeName 값이 있지만 textNode에는 tagName 값이 없습니다. IE에서는 nodeName 사용에 문제가 있는 것 같습니다(구체적인 상황은 테스트되지 않았지만 제 IE는 여러 번 죽었습니다).

(2)해결책:

tagName을 사용하지만 비어 있는지 감지해야 합니다.

15. 속성

input.type 속성은 IE에서는 읽기 전용이지만 Firefox에서는 수정할 수 있습니다

16. document.getElementsByName() 및 document.all[name] 관련 문제

(1)기존 질문:

IE에서는 getElementsByName() 및 document.all[name]을 사용하여 div 요소를 얻을 수 없습니다(얻을 수 없는 다른 요소가 있는지는 알 수 없음).

17. 마우스 오버 손 변환을 위한 가장 간단한 CSS가 변경됩니다

cursor:pointer;/*ff는 커서:hand*/를 지원하지 않습니다. dw8에서 자동으로 생성된 속성에는 hand 속성이 없습니다.

18.ff는 가장 일반적인 반투명 필터를 지원하지 않습니다.

필터: Alpha(Opacity=50) /* IE의 경우 */

불투명도: .5;/* Firefox의 경우 */

style="-moz-opacity:0.5; 필터:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;

this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5

this.filters.alpha.opacity=50"

19.ff는 표현식을 지원하지 않습니다. 예를 들어 링크의 테두리를 제거하려면 다른 CSS를 별도로 작성해야 합니다

a,area { blr:expression(this.onFocus=this.blur()) } /* IE의 경우 */

:focus { 개요: 없음 } /* Firefox의 경우 */

20.ff는 div 스크롤 막대의 색상 설정을 지원하지 않으며 현재로서는 이를 대체할 수 있는 좋은 방법이 없습니다.

.contendiv {

위치: 절대; 왼쪽: 10px; 높이: 135px 줄 높이:120%;텍스트 정렬:왼쪽; 글꼴 계열:"宋体";단어 나누기: 나누기-전체;

OVERFLOW-Y:자동;OVERFLOW-X:아니요
스크롤바-화살표-색상: 빨간색; 스크롤바-트랙-색상: F6F6F6; 스크롤바-얼굴-색상: #F6F6F6;
스크롤바-DARKSHADOW-COLOR:#F6F6F6;스크롤바-3DLIGHT-COLOR:#F6F6F6;스크롤바-HIGHLIGHT-COLOR:#F6F6F6;
}
FF에서는 전혀 효과가 없습니다.

21.ie 텍스트 아래 수평선이 아래에 표시됩니다

border-width: 0px 0px 1px 0px; ff에서는 텍스트 위에 위치합니다. (매뉴얼을 확인했는데도 해결 방법을 찾을 수 없습니다. 느낌이 이상합니다~~ 알고보니 너비: 186px; 높이: 0px;로 인해 ff의 내결함성이 너무 좋지 않은 것으로 나타났습니다. 실제로, a:haver는 우수한 속성을 상속받았으며, 단지 다양한 스타일을 정의하는 것만으로 CSS에 대한 이해가 깊어져 CSS를 제공하는 데에도 도움이 되는 것 같습니다.

.onelinksdiv a:hover {

디스플레이: 블록;테두리 스타일: 단색;색상: #ff0000;테두리 너비: 0px 0px 1px 0px

/*

디스플레이: 블록;테두리 스타일: 솔리드; 테두리 너비: 0px 0px 1px 0px; 너비: 186px; 높이: 0px; 색상: #ff0000; 글꼴 크기: 14px; 텍스트 정렬: 오른쪽 */
}

//다음 작성 방법은 ie에서는 정상이지만 ff에서는 잘못되었습니다

.onelinksdiv a:hover {

디스플레이: 블록;테두리: #ff0000 테두리 너비: 0px 0px 1px 0px

너비: 186px; 높이: 0px; 글꼴 크기: 14px; }

관련 참고자료:


테두리 너비:테두리 상단 너비 테두리 오른쪽 너비 테두리 하단 너비 테두리 왼쪽 너비 p#fourorders

{

테두리 너비:두꺼움 중간 얇은 12px

}

4개의 값이 정의되면 이 4개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리의 너비 값입니다(상단 테두리부터 시작하여 시계 반대 방향으로 이동).

은 다음 정의
와 동일합니다.

p#fourorders

{

테두리 상단 너비:두꺼움

테두리 오른쪽 너비:중간

테두리 하단 너비:얇음

테두리 왼쪽 너비:12px
}

22.ff는

스크롤 속성을 지원하지 않습니다

overflow:hidden은 정의되어야 하며 본문 아래가 아닌 html 태그 아래에 있어야 합니다.

html{
오버플로:숨김
}

23.ff는 데이터 아일랜드 바인딩을 지원하지 않습니다

IE에서는 데이터를 로드할 수 있지만 처음에는 Firefox에서 데이터를 로드할 수 없기 때문일 것이라고 생각했습니다. 내용 단어가 너무 많아서 줄이 끊어져서 로딩이 안되는데 몇 단어만 삭제해도 똑같이 안되네요.

24.style="word-break:break-all"

웹 페이지의 셀 내용이 한 줄을 초과하는 경우 IE 브라우저에서 정의한 줄 바꿈 스타일을 정상적으로 사용할 수 있지만, Firefox에서는 스타일="word-break:break-all"을 지원하지 않습니다. MS 확장의 IE 특정 속성이며 W3C 표준이 되지 않았으므로 Firefox에서는 아직 이를 지원할 수 없습니다. 하지만 MS는 이를 W3C에 제출했고, W3C의 CSS3 후보 계획에서도 이를 확인할 수 있다. W3C에서 CSS3 표준으로 확정된 후에 Firefox가 이 속성을 지원할 수 있기를 바랍니다. 그 전에
를 시도해 보세요. style="table-layout:fixed;word-wrap: break-word" (영문일 경우 정상적으로 래핑이 불가능합니다)

25. 현재 FF2.0은 IE의 네임 앵커를 지원하지 않습니다

다음과 같은 쓰기는 지원되지 않습니다. 뒤로가기 W3C 구문에 따르면 태그는 항상 href 주소를 검색하여 해당 주소로 이동합니다. 이제 onclick 이벤트가 ### 주소와 충돌합니다.

Firefox가 IE의 일부 요소 속성과 호환되도록 하기 위해 우연히 Firefox가 공백에 민감하다는 사실을 발견했습니다.

//공백이 있으면 앵커 포인트가 작동합니다

//공백 없음, 앵커 포인트는 효과가 없습니다
앵커 포인트를 작성하는 방법은 과 같이 매우 까다롭습니다. Firefox는 앵커 포인트를 지원하지 않으므로 id=#1을 추가해야 합니다
동일한 페이지를 정적으로 참조하는 경우 다음과 같이 작성해야 합니다. , 작동하지 않음*** *상태 페이지는 JS를 사용해야 합니다

후유증이 왔는데, 마우스 스타일과 브라우저 호환성을 고려해서 다시 고민을 시작했습니다.

//호환되지 않음

//호환되지 않음
//{...}이 없으면 스크립트 불법작성입니다
//시스템 마우스 스타일 맞춤설정에 관심이 없는 사용자
많은 사람들이 Firefox를 사용하고 있다고 생각했는데, 웹사이트의 통계 분석에 따르면 Firefox는 3.18%라는 안타까운 수치만 가지고 있지만 표준에 부합하려면 많은 노력이 필요합니다! 그러나 표준화는 향후 유지 관리 및 확장에 도움이 되며 기술을 지속적으로 상기시키는 데 도움이 됩니다.
-->

질문 14: OVERFLOW-Y:auto;OVERFLOW-X:hidden; IE에서는 숨기려면 no를 사용할 수 있지만 FireFox에서는 hide를 사용해야 합니다.

http://www.bkjia.com/PHPjc/371859.htmlwww.bkjia.com참http: //www.bkjia.com/PHPjc/371859.htmlTechArticle1. document.form.item 문제 (1) 기존 문제 : 기존 코드에 document.formName이 많이 있습니다. .item(itemName)과 같은 문은 Firefox에서 실행할 수 없습니다. (2) 해결책: 변경...