고정 헤더 영역
상세 컨텐츠
본문
크로스브라우징
브라우저마다 다르게 출력하는 차이를 극복하기 위한 기술.
DTD의 사용
IE브라우저의 경우 가장 마음대로 표현하는 브라우저인데, DTD를 선언해주면 많은 부분이 해소된다. 다음은 가장 많이 사용하는 XHTML 호환성 모드이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
다른 DTD의 선언은 DTD 종류와 설명을 참조하길 바란다.
공통 선택자(Universal selector) 이용하기
전체 엘리먼트에 미리 지정된 값을 부여함으로서 차이점 최소화하는 방법이다. 전체를 선택하는 선택자 "*"을 이용하여 다음을 지정해주자.
* { margin:0; padding:0; font-size:small; font-family:돋움, Dotum, AppleGothic, sans-serif; }
여백에 대해서 모두 0으로 맞추어주는 것은 기본이고, font-size나 font-family는 선택사항이다.
Conditional Comment
IE 브라우져를 위한 코드를 삽입하기 위해서는 아래와 같은 조건 절을 이용하여, 크로스 브라우징을 구현할 수 있습니다.
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
CSS에서
다음과 같은 코드로 CSS에서 브라우저 간의 차이를 극복할 수 있다.
.txtTitle
{
/*모든 브라우저(따라서 IE를 제외한 모든 브라우져 용으로 가장 윗쪽에 설정)*/
height: 15px;
/*IE 전용(IE7에서 이 문장을 만나면 재설정해준다.
IE를 제외한 다른 브라우져에서는 무시한다.) */
#height: 15px;
/* IE6.0 과 이전버젼용(IE6에서 이 문장을 만나면 재설정 해준다.
IE7을 포함한 다른 브라우져에서는 무시한다.) */
_height: 21px;
}
IE에서는 브라우저 버전마다 적용되는 기능과 그렇지 않은 기능이 있으므로 구분해야한다.
/*title의 모든 자식 중에서 h3 요소 선택(손자, 증손자 모두 적용)*/
.title h3 {height: 21px; }
/* title의 바로 하위 자식의 h3요소 선택(손자, 증손자 제외)(IE6 미지원) */
.title > h3 {min-height: 21px; }
hasLayout 속성 가지게 하기
IE브라우저에서 다르게 보이는 현상으로 골머리가 아플때는, 일단 hasLayout 속성을 주도록 해보자. IE계열 브라우저에서는 hasLayout라는 것을 두었는데 이 값을 true로 설정되도록 하면 많은 문제를 해결 할 수 있다고 한다.
hasLayout으로 해결 가능한 문제들
- IE의
float버그 width, height등의 기본속성이 다르게 적용되는 박스- Container와 그 요소 사이에 margin이 합쳐지는 현상
- 리스트를 표시할 때 발생하는 버그
- 배경 이미지 위치가 다르게 나타날 때
- 기타 알려지지 않은 문제 점들
hasLayout를 가지게 하는 방법
position: absolutefloat: left|rightdisplay: inline-blockwidth: ‘auto’ 이외의 값 (IE6 표준 모드 inline요소 제외)height: ‘auto’ 이외의 값 (IE6 표준 모드 inline요소 제외)zoom: ‘normal’ 이외의 값 (IE 전용)writing-mode: tb-rl (IE 전용)overflow: hidden|scroll|auto (IE7 전용)overflow-x|-y: hidden|scroll|auto (IE7 전용)position: fixed (IE7 전용)min-width,max-width,min-height,max-height (IE7 전용)
위의 방법이 다른 브라우저에서 해석되지 않도록 하기 위해서 Conditional Comment를 이용하는 것을 권장한다.
