크로스 브라우징을 위한 몇가지 기술
크로스브라우징
브라우저마다 다르게 출력하는 차이를 극복하기 위한 기술.
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를 이용하는 것을 권장한다.