js IE 와 Firefox 의 차이 모음 집

15766 단어
1. fireforx 는 innerText 를 지원 할 수 없습니다.fireforx 는 innerHTML 을 지원 하지만 innerText 는 지원 하지 않 습 니 다. textContent 를 지원 하여 innerText 를 실현 합 니 다. 그러나 기본적으로 남 은 빈 칸 도 유지 합 니 다.textContent 를 사용 하지 않 으 면 문자열 에 HTML 코드 가 포함 되 어 있 지 않 으 면 innerHTML 로 대체 할 수 있 습 니 다.
2. 웹 페이지 내용 선택 금지: IE 에 서 는 일반적으로 js: obj. onselectstart = function () {return false;} 을 사용 하고 fireforx 는 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) {     X= ev.pageX;Y=ev.pageY; }
6. DIV 등 요소 의 경계 문제: 예 를 들 어 div 의 CSS: {width: 100 px; height: 100 px; border: \ # 000000 1px solid;} IE 에서 div 의 너비 (테두리 너비 포함): 100 px, div 의 높이 (테두리 너비 포함): 100 px;한편, firefox: div 의 너비 (테두리 너비 포함): 102 px, div 의 높이 (테두리 너비 포함): 102 px;
그래서 IE 와 fireforx 를 호 환 하 는 드래그 창 을 만 들 때 js 와 css 의 쓰기 에 있어 서 머리 를 써 서 두 가지 팁 을 드 려 야 합 니 다.
1. 브 라 우 저 유형 판단: var isIE = document. all?true:false; document. all 문법 을 지원 한다 면 isIE = true, 그렇지 않 으 면 isIE = false 변 수 를 썼 습 니 다.
2. 서로 다른 브 라 우 저 에서 의 CSS 처리: 일반적으로 사용 할 수 있 습 니 다!important 는 css 문 구 를 우선 사용 합 니 다 (fireforx 만 지원 합 니 다). 예 를 들 어 {border - width: 0px! important; border - width: 1px;} fireforx 에서 이 요 소 는 테두리 가 없습니다. IE 에서 테두리 폭 은 1px 입 니 다.
 1. document. formName. item ("itemName") 문제 설명: IE 에서 document. formName. item ("itemName") 또는 document. formName. elements ["element Name"] 를 사용 할 수 있 습 니 다.Firefox 에 서 는 document. formName. elements ["element Name"] 만 사용 할 수 있 습 니 다.해결 방법: document. formName. elements ["element Name"] 를 통일 적 으로 사용 합 니 다.
2. 집합 류 대상 문제 설명: IE 에서 () 또는 [] 를 사용 하여 집합 류 대상 을 얻 을 수 있다.Firefox 에 서 는 집합 대상 을 [] 로 만 가 져 올 수 있 습 니 다.해결 방법: 집합 대상 을 통일 적 으로 사용 합 니 다.
3. 사용자 정의 속성 문제 설명: IE 에서 일반적인 속성 을 가 져 오 는 방법 으로 사용자 정의 속성 을 가 져 올 수도 있 고 getAttribute () 를 사용 하여 사용자 정의 속성 을 가 져 올 수도 있 습 니 다.Firefox 에 서 는 getAttribute () 를 사용 하여 사용자 정의 속성 을 가 져 올 수 있 습 니 다.해결 방법: getAttribute () 를 통 해 사용자 정의 속성 을 통일 적 으로 가 져 옵 니 다.
4. eval ("idName") 문제 설명: IE 에서 eval ("idName") 이나 getElement ById ("idName") 를 사용 하여 id 를 idName 의 HTML 대상 으로 가 져 올 수 있 습 니 다.Firefox 에 서 는 getElement ById ("idName") 를 사용 하여 id 가 idName 인 HTML 대상 을 얻 을 수 있 습 니 다.해결 방법: getElement ById ("idName") 로 id 를 idName 의 HTML 대상 으로 통일 합 니 다.
5. 변수 명 이 특정한 HTML 대상 ID 와 같은 문제 설명: IE 에서 HTML 대상 의 ID 는 document 의 부하 대상 변수 명 으로 직접 사용 할 수 있 고 Firefox 에 서 는 사용 할 수 없습니다.Firefox 에 서 는 HTML 대상 ID 와 같은 변수 이름 을 사용 할 수 있 으 며, IE 에 서 는 사용 할 수 없습니다.해결 방법: document. idName 대신 document. getElement ById ("idName") 를 사용 합 니 다.오 류 를 줄 이기 위해 HTML 대상 ID 와 같은 변수 이름 을 가 져 오지 않 는 것 이 좋 습 니 다.변 수 를 설명 할 때, 일률적으로 var 키 워드 를 추가 하여 나 쁜 의 미 를 피한다.
6. const 문제 설명: Firefox 에서 const 키워드 나 var 키 워드 를 사용 하여 상수 정 의 를 할 수 있 습 니 다.IE 에 서 는 var 키워드 로 상수 만 정의 할 수 있 습 니 다.해결 방법: var 키 워드 를 통일 적 으로 사용 하여 상수 를 정의 합 니 다.
7. input. type 속성 문제 설명: IE 에서 input. type 속성 은 읽 기 전용 입 니 다.하지만 Firefox 에서 input. type 속성 은 읽 기와 쓰기 입 니 다.       해결 방법: input. type 속성 을 수정 하지 않 습 니 다.수정 이 필요 하 다 면 원래 의 input 를 숨 긴 다음 같은 위치 에 새로운 input 요 소 를 삽입 할 수 있 습 니 다.
8. window. event 문제 설명: window. event 는 IE 에서 만 실행 할 수 있 고 Firefox 에서 만 실행 할 수 없습니다. 이것 은 Firefox 의 event 는 이벤트 가 발생 하 는 현장에서 만 사용 할 수 있 기 때 문 입 니 다.해결 방법: 이벤트 가 발생 하 는 함수 에 이벤트 파 라 메 터 를 추가 하여 함수 내 (가상 인삼 은 evt) 에서 var my Event = evt? evt: (window. event? window. event: null) 를 사용 합 니 다.       예시:
 
  

<br> function doSomething(evt) { <br> var myEvent = evt?evt:(window.event?window.event:null) <br> ... <br> } <br> </div> <p></p> <p>       9.event.x event.y <br> :IE ,even x、y , pageX、pageY ;Firefox ,even pageX、pageY , x、y 。<br> :var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;<br>        8 , myEvent event 。</p> <p>10.event.srcElement <br> :IE ,even srcElement , target ;Firefox ,even target , srcElement 。<br> : srcObj = event.srcElement ? event.srcElement : event.target;<br>        8 , myEvent event 。</p> <p>11.window.location.href <br> :IE Firefox2.0.x , window.location window.location.href;Firefox1.5.x , window.location。<br> : window.location window.location.href。 location.replace() 。</p> <p>12. <br> :IE , showModalDialog showModelessDialog ;Firefox 。<br> : window.open(pageURL,name,parameters) 。 <br>        , window.opener 。 , var subWindow = window.open(pageURL,name,parameters); 。</p> <p>13.frame iframe <br> frame : <br> <frame src="xxx.html" id="frameId" name="frameName" /> <br> (1) frame <br> IE: window.frameId window.frameName frame ;<br> Firefox: window.frameName frame ;<br>        : window.document.getElementById("frameId") frame ;</p> <p>(2) frame <br> IE Firefox window.document.getElementById("frameId").src = "xxx.html" window.frameName.location = "xxx.html" frame ;<br> frame , frame parent 。</p> <p>14.body <br> :Firefox body body ; IE body body 。<br>        [ ] , 。<br>        [ ] ,IE6、Opera9 FireFox2 , JS , 。</p> <p>15. <br> :IE , document.body.onload = inject; function inject() ; Firefox , document.body.onload = inject();<br> : document.body.onload=new Function('inject()'); document.body.onload = function(){/* */}<br>        [ ] Function function </p> <p>16. <br> : IE , obj.parentElement obj.parentNode obj ; firefox , obj.parentNode obj 。<br> : firefox IE DOM, obj.parentNode obj 。</p> <p>17.cursor:hand VS cursor:pointer <br> :firefox hand, ie pointer , 。<br> : pointer。</p> <p>18.innerText . <br>        :innerText IE , innerText FireFox 。<br>        : IE textContent innerText。<br>        :<br> </p> <div class="codetitle"> <span><u></u></span> : </div> <div class="codebody" id="code49929"> <br> if(navigator.appName.indexOf("Explorer") >-1){ <br> document.getElementById('element').innerText = "my text"; <br> } else{ <br> document.getElementById('element').textContent = "my text"; <br> } <br> </div> <p></p> <p>       [ ] innerHTML ie、firefox , , outerHTML ie , 。</p> <p>19. <br>    :FireFox obj.style.height = imgObj.height 。<br>        : obj.style.height = imgObj.height + 'px';</p> <p>20. Table <br>        :ie、firefox table , ie table tr innerHTML , js tr , appendChild 。<br> :</p> <p></p> <div class="codetitle"> <span><u></u></span> : </div> <div class="codebody" id="code27902"> <br> // table : <br> var row = otable.insertRow(-1); <br> var cell = document.createElement("td"); <br> cell.innerHTML = ""; <br> cell.className = "XXXX"; <br> row.appendChild(cell); <br> </div> <p></p> <p>       [ ] JS , 。 JS table, JQuery。</p> <p>21. ul ol <br>    ul、ol , :list-style:none;margin:0px;padding:0px; <br> margin IE ,padding FireFox 。← , ↓<br>        [ ] , 。<br>        [ ] , IE , margin:0px 、 , padding ; Firefox , margin:0px , padding:0px , list-style:none 。 , IE margin:0px , Firefox margin:0px、padding:0px list-style:none 。</p> <p>22. CSS <br> IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 <br> FF:opacity:0.6。<br>        [ ] , opacity 。</p> <p>23. CSS <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-border-radius- bottomright:4px;。<br>        [ ] CSS , JQuery , 。</p> <p> CSS , CSS 。 , DHTML , table,CSS DOM, IE、Firefox、Opera 。BTW, ,FF Opera CSS CSS , 。</p> <div class="clearfix"> <span id="art_bot" class="jbTestPos"></span> </div> </div> </div> </div> </div> <!--PC WAP --> <div id="SOHUCS" sid="1176554183952773120"></div> <script type="text/javascript" src="/views/front/js/chanyan.js">
이 가능 하 다, ~ 할 수 있다,...
  • Spring 의 주해 축적
    yijiesuifeng
    spring 주해
  • 센서
    백합 은 차 가 아니다.
    android 센서
  • [광자 기와 탐지] 금 여 옥 의 의미
    comsci
  • 간단 한 역순 인쇄 갯 수
    검 은 교룡
    인쇄 하 다.
  • PHP: 6 확장 자 를 가 져 오 는 방법
    IT 독행 자
    PHP 확장자
  • 면접
    문 강 추
    면접시험
  • XML 의 네 가지 해석 방식
    작은 귤
    dom jdom dom4j sax
  • wordpress 에서 흔히 볼 수 있 는 동작
    aichenglong
    중국어 등록 wordpress 메뉴 제거
  • 알파벳 별 분류:
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 기타
    첫 페이지 -
    우리 -
    역 내 검색 -
    Sitemap -
    권리 침해 신고
    모든 IT 지식 창고 저작권© 2000 - 2050 IT 지식 창고 IT610. com, 판권 소유.
    경 ICP 비 09083238 호









    좋은 웹페이지 즐겨찾기