javascript css IE 와 Firefox 에서 구별 분석

1.document.formName.item("itemName") 문제. 질문 설명:IE 에서 사용 가능 document.formName.item("itemName") 혹시 document.formName.elements ["elementName"]；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") 혹시 getElementById("idName") 얻다 id ...을 위 하여 idName 의 HTML 대상;Firefox 에서 만 사용 가능 getElementById("idName") 얻다 id ...을 위 하여 idName 의 HTML 대상 이다.해결 방법:통일 용 getElementById("idName") 얻다 id ...을 위 하여 idName 의 HTML 대상 이다.5.변수 명 이 특정한 HTML 대상 ID 와 같은 문제 설명:IE 에서 HTML 대상 의 ID 는 document 의 부하 대상 변수 이름 을 직접 사용 하면 Firefox 에서 사용 할 수 없습니다.Firefox 에 서 는 HTML 대상 ID 와 같은 변수 이름 을 사용 할 수 있 으 며,IE 에 서 는 사용 할 수 없습니다.해결 방법:사용 document.getElementById("idName") 대신 하 다 document.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 의 이벤트 가 이벤트 가 발생 한 현장에서 만 사용 할 수 있 기 때 문 입 니 다.해결 방법:이벤트 발생 함수 에 이벤트 파 라 메 터 를 추가 하여 함수 내(가설 형 참 은 evt)에서 사용 합 니 다. var myEvent = evt?evt:(window.event?window.event:null)       예시:

<input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
var myEvent = evt?evt:(window.event?window.event:null) 
... 
} 

9.event.x 와 event.y 문제 설명:IE 에서 even 대상 은 x,y 속성 이 있 지만 pageX,pageY 속성 이 없다.Firefox 에서 even 대상 은 pageX,pageY 속성 이 있 지만 x,y 속성 이 없습니다.해결 방법:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;8 조 문 제 를 고려 하면 이벤트 대신 마 이 이벤트 로 바 꾸 면 된다.10.이벤트.srcElement 문제 설명:IE 에서 even 대상 은 srcElement 속성 이 있 지만 target 속성 이 없습니다.Firefox 에서 even 대상 은 target 속성 이 있 지만 srcElement 속성 이 없습니다.해결 방법:srcObj 사용 = event.srcElement ? event.srcElement : event.target;8 조 문 제 를 고려 하면 이벤트 대신 마 이 이벤트 로 바 꾸 면 된다.11.window.location.href 문제 설명:IE 또는 Firefox 2.0.x 에서 window.location 또는 window.location.href 를 사용 할 수 있 습 니 다.Firefox 1.5.x 에 서 는 window.location 만 사용 할 수 있 습 니 다.해결 방법:사용 window.location 대신 하 다 window.location.href。물론 사용 도 고려 해 볼 수 있 습 니 다. location.replace()방법.12.모드 와 비 모드 창 문제 설명:IE 에서 쇼 Modal Dialog 와 쇼 ModelessDialog 를 통 해 모드 와 비 모드 창 을 열 수 있 습 니 다.Firefox 에 서 는 안 됩 니 다.해결 방법:직접 사용 window.open(pageURL,name,parameters) 새 창 을 여 는 방식 입 니 다. 하위 창의 인 자 를 부모 창 으로 전달 하려 면 하위 창 에서 window.opener 를 사용 하여 부모 창 에 접근 할 수 있 습 니 다.부모 창 이 하위 창 을 제어 하려 면 var 를 사용 하 십시오. subWindow = window.open(pageURL,name,parameters); 새로 열 린 창 대상 을 가 져 옵 니 다.13.frame 과 iframe 문 제 는 다음 frame 을 예 로 들 면: 　　 (1)frame 대상 IE 에 접근:window.frameId 또는 window.frameName 을 사용 하여 frame 대상 에 접근 합 니 다.Firefox:window.frameName 을 사용 하여 이 frame 대상 에 접근 합 니 다.해결 방법:통일 적 으로 사용 window.document.getElementById("frameId") 이 frame 대상 에 접근 하기;(2)frame 내용 전환 은 IE 와 Firefox 에서 window.document.getElement ById("frameId").src 를 사용 할 수 있 습 니 다. = "52css.com.html"또는 window.frame Name.location = "52css.com.html"프레임 의 내용 전환 하기;frame 의 인 자 를 부모 창 으로 전송 하려 면 frame 에서 parent 키 워드 를 사용 하여 부모 창 에 접근 할 수 있 습 니 다.14.body 불 러 오기 문제 설명:Firefox 의 body 대상 은 body 태그 가 브 라 우 저 에 의 해 완전히 읽 히 기 전에 존재 합 니 다.IE 의 body 대상 은 body 태그 가 브 라 우 저 에 의 해 완전히 읽 힌 후에 야 존재 합 니 다.[비고] 이 문 제 는 아직 실제 검증 되 지 않 았 으 니,검증 한 후에 다시 수정 하 자.[비고] 경험 증,IE6,Opera 9,FireFox 2 에는 이러한 문제 가 존재 하지 않 습 니 다.단순 한 JS 스 크 립 트 는 스 크 립 트 전에 불 러 온 모든 대상 과 요 소 를 방문 할 수 있 습 니 다.비록 이 요소 가 불 러 오지 않 았 더 라 도.15.사건 의뢰 방법 문제 설명:IE 에서 사용 document.body.onload = inject; 그 중 기능 inject()는 그 전에 이미 실현 되 었 습 니 다.Firefox 에서 사용 document.body.onload = inject();해결 방법:통일 적 으로 사용 document.body.onload=new Function('inject()'); 혹은 document.body.onload = function(){/* 여 기 는 코드 입 니 다. */}[주의] Function 과 function 의 차이 16.방문 한 부모 요소 의 차이 점 설명:IE 에서 사용 obj.parentElement 혹시 obj.parentNode obj 의 부모 노드 에 접근 하기;Firefox 에서 사용 obj.parentNode obj 의 부모 노드 에 접근 합 니 다.해결 방법:Firefox 와 IE 모두 DOM 을 지원 하기 때문에 obj.parentNode 를 통일 적 으로 사용 합 니 다. obj 의 부모 노드 에 접근 합 니 다.커서:hand VS cursor:pointer 문제 설명:Firefox 는 hand 을 지원 하지 않 지만 ie 는 pointer 를 지원 합 니 다. ，둘 다 손 모양 지시 야.해결 방법:pointer 를 통일 적 으로 사용 합 니 다.18.innerText 의 문제.문제 설명:innerText 는 IE 에서 정상적으로 일 할 수 있 지만 innerText 는 FireFox 에서 안 된다.해결 방법:innerText 대신 IE 브 라 우 저 에서 textContent 를 사용 합 니 다.예시:

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

 innerHTML 동시에 ie,fireforx 등 브 라 우 저 에 의 해 지원 되 고 다른 것 은 outerHTML 등 은 ie 에 의 해 만 지원 되 며 사용 하지 않 는 것 이 좋 습 니 다.19.대상 너비 높 은 할당 문제 설명:FireFox 에서 유사 obj.style.height = imgObj.height 라 는 문구 가 잘못 되 었 습 니 다.해결 방법:통일 적 으로 사용 obj.style.height = imgObj.height + 'px';20.Table 작업 문제 설명:ie,fireforx 및 기타 브 라 우 저 에 대한 table 탭 의 동작 이 각각 다 릅 니 다.ie 에 서 는 table 과 tr 의 innerHTML 할당 을 허용 하지 않 습 니 다.js 를 사용 하여 tr 를 추가 할 때 appendChild 방법 을 사용 해도 사용 되 지 않 습 니 다.해결 방법:

// table      ： 
var row = otable.insertRow(-1); 
var cell = document.createElement("td"); 
cell.innerHTML = ""; 
cell.className = "XXXX"; 
row.appendChild(cell); 

 나 는 JS 를 사용 하여 표를 직접 조작 하 는 일이 매우 드 물기 때문에 이 문 제 는 만난 적 이 없다.JQuery 와 같은 JS 프레임 워 크 집합 을 사용 하 는 것 을 권장 합 니 다.둘째,ul 과 ol 목록 의 들 여 쓰기 문제 가 ul,ol 등 목록 의 들 여 쓰기 문 제 를 제거 할 때 스타일 은 list-style:none 이 라 고 써 야 합 니 다.margin:0px;padding:0px; 그 중에서 margin 속성 은 IE 에 유효 하고 padding 속성 은 FireFox 에 유효 합 니 다.← 이 문장 은 서술 이 잘못 되 었 으 니,상세 한 것 은↓[주]를 보십시오. 이 문 제 는 아직 실제 검증 되 지 않 았 으 니,검증 한 후에 다시 수정 하 자.[비고] 경험 증,IE 에서 margin:0px 를 설정 하면 목록 의 상하 좌우 들 여 쓰기,공백 과 목록 번호 나 원점 을 제거 할 수 있 습 니 다.padding 을 설정 하면 스타일 에 영향 을 주지 않 습 니 다.Firefox margin:0px 를 설정 하면 상하 의 공백 만 제거 할 수 있 습 니 다.padding:0px 를 설정 한 후 좌우 들 여 쓰기 만 제거 할 수 있 고 list-style:none 도 설정 해 야 합 니 다. 목록 번호 나 원점 을 제거 할 수 있 습 니 다.즉,IE 에 margin:0px 만 설정 하면 최종 효 과 를 얻 을 수 있 고 Firefox 에 서 는 margin:0px 를 동시에 설정 해 야 합 니 다. padding:0px 및 list-style:none 세 가지 만 최종 효 과 를 얻 을 수 있 습 니 다.둘째,CSS 투명 문제 IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). 　　FF：opacity:0.6。[비고] 두 개 다 쓰 고 opacity 속성 을 아래 에 두 는 것 이 좋 습 니 다.2.3.CSS 원 각 문제 IE:ie7 이하 버 전 은 원 각 을 지원 하지 않 습 니 다.　　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;。[비고] 원 각 문 제 는 CSS 의 대표 적 인 문제 이 므 로 JQuery 프레임 집합 을 사용 하여 원 각 을 설정 하고 이런 복잡 한 문 제 를 다른 사람 에 게 남 겨 두 는 것 을 권장 합 니 다.CSS 에 대한 질문 이 너무 많 습 니 다.심지어 같은 CSS 정의 가 서로 다른 페이지 표준 에서 의 디 스 플레이 효과 도 다 릅 니 다.더 많은 지식 은 52CSS.com 의 글 을 참고 하 세 요.하나의 발전 에 적합 한 건 의 는 페이지 가 표준 DHTML 기준 을 사용 하 는 것 이다. table 을 적 게 사용 하고 CSS 정 의 는 가능 한 한 표준 DOM 에 따라 IE,Firefox,Opera 등 주류 브 라 우 저 를 병행 합 니 다.BTW,많은 경우 FF 와 Opera 의 CSS 해석 기준 은 CSS 기준 에 더욱 가 깝 고 규범 성 이 있다.