태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

IE6~7 문제해결

9년 전

IE 브라우저 버전은 4개 이지만 둘로 구분할 수 있다.

IE6, IE7, IE8, IE9 브라우저 버전은 4개이나 표준 준수율 또는 버그 발생률에 따라 단 두 가지 종류로 간단하게 구분할 수 있습니다.

IE8~9 브라우저는 HTML/CSS 표준 준수 테스트 도구인 Acid2 테스트에 서 모두 만점을 받은 브라우저 들입니다. 따라서 이 두 버전의 브라우저는 다른 여느 표준계열 브라우저들(크롬, 사파리, 오페라, 파이어폭스)과 어깨를 나란히 합니다. IE8 또는 IE9 브라우저에 최적화된 웹 페이지는 다른 브라우저에서도 별 문제 없이 똑같이 잘 보입니다.

그러나 IE6~7 브라우저는 표준 준수율이 상대적으로 떨어지고 버그도 많습니다. 다행인것은 IE6 브라우저와 IE7 브라우저가 그다지 큰 차이가 없다는 점입니다. IE6 브라우저에서 발생하는 문제는 IE7 브라우저에서 동일하게 발생할 확률이 높습니다. IE7 브라우저가 조금 더 나을 뿐입니다.

결국 저는 IE8~9 브라우저에 대해서는 할 말이 많지 않습니다. IE6~7 브라우저의 문제 해결을 위해서 몇 가지 팁을 소개합니다.

IE6~7 문제해결.

•IE6~7 브라우저도 표준에 따라 구현된 브라우저 입니다. 표준 DTD를 사용하면 표준에 따라 잘 렌더링 해줍니다. 반드시 표준 DTD를 사용하세요. DTD를 사용하지 않으면 모든 브라우저들이 IE5 버전의 브라우저를 흉내내는 Quirks Mode 상태가 되어 각기 다른 뷰를 출력합니다.
•사용자에게 무엇이 더 좋은지 HTML과 XHTML의 우위를 논하는 것은 무의미 합니다. 그러나 XHTML의 엄격한 문법이 개발자에게는 더 유리할 것입니다.
•엄격한(Strict) DTD와 호환형(Transitional) DTD 가운데 호환형 DTD를 추천합니다. 엄격함은 많은 오류를 유발할 뿐입니다.
•마이크로소프트의 독자적인 표현방식인 hasLayout이 존재한다는 것을 알아야 합니다. hasLayout이 없으면 문제가 발생하는 경우가 많습니다. IE6~7 브라우저에서 화면에 특정 요소가 보이지 않거나 잘못된 표현을 하면 { zoom:1 } 속성을 추가로 부여하여 해결되는 경우가 많습니다. zoom 속성은 hasLayout Trigger 이며 다른 브라우저들은 해석하지 않는 속성입니다.
•float된 방향와 같은 방향의 margin이 존재하는 경우 IE6 브라우저는 margin을 두 배로 출력하는 빈도 높은 버그가 있습니다. float이 부여된 요소에 display:inline 속성을 부여하면 해결됩니다. float 처리된 요소는 display 속성이 block으로 바뀌는데 이 값은 절대로 덮어쓰기가 되지 않습니다. float된 요소에 inline 속성을 부여해도 여전히 block 이라는 뜻입니다. 그 밖에 float 요소는 마지막 텍스트 콘텐츠를 복사해서 출력하는 버그도 있는데 이 때에도 display:inline 속성을 부여하면 해결됩니다.
•zoom 속성으로 문제가 해결되지 않으면 position:relative 속성을 사용해 봅니다. display:block 으로 처리한 a 요소의 클릭 영역이 제대로 잡히지 않는 문제를 해결할 수 있습니다. 마우스 커서 모양의 잘못된 출력도 바로잡아 줍니다.
•*property:value와 같은 형식으로 속성 앞에 ‘*’ 별표를 붙이면 IE6, IE7 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.
•_property:value와 같은 형식으로 속성 앞에 ‘_’ 언더바를 붙이면 IE6 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.

추천 목록

번호	제목
2,675	[Shoutcast] 현재 플레이되는 곡명 스크립트 PHP
2,674	[Shoutcast] 스트리밍 노래제목을 변경 스크립트
2,673	Shoutcast PHP Scripts
2,672	FTP에서 삭제 안되는 파일이나 폴더 삭제하기
2,671	SHOUTcast 를 이용한 인터넷 라이브 방송 시스템 구축
2,670	DAUM 우편번호 서비스 활용하기
2,669	실행중 PHP 에러 메시지 레벨 조정하기
2,668	PHP 인젝션과 file get contents의 관계
2,667	문자열 글자 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse String
2,666	배열 요소 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse Array
2,665	php 메모리 사용
2,664	자바스크립트 내부 객체 보기
2,663	자바 스크립트 숫자 처리 콤마 처리
2,662	자바스크립트 Base64 encode, decode
2,661	PHP 문자열 관련 함수
2,660	[php] 문자열을 나누거나 합치는 explode, implode 함수
2,659	php 문자열 자르기 나누기 분리하기 - explode() , split()
2,658	DB 접근 및 쿼리문(insert,select,update,delete)
2,657	[MySQL] 필드에서 특정문자 포함 또는 제외한 DB 검색, LIKE ,NOT
2,656	php5 mysqli 디비 접속 클래스 프로그램 및 사용법
2,655	PHP 문자열 나누기 - explode()
2,654	[PHP] 배열 Array
2,653	php 배열
2,652	[php] Array() 배열이란?
2,651	PHP 배열 함수 정리
2,650	PHP 기본적인 배열 사용법
2,649	html에서 입력한값 DB에서 받아오기 (도서정보 검색)
2,648	SQL 쿼리 정리
2,647	[MySql]DB에서 서로 다른 테이블의 데이터를 한번에 불러오기
2,646	jquery checkbox 전체 선택, 전체 해제, 체크 값 추출