IE 6~7 브라우저는 완벽하게 표준에 따라 구현되어 있지 않고 버그가 많다는 사실을 알아야 합니다. 그리고 이 브라우저들의 디버깅 기법을 익혀야 합니다. IE8, Firefox, Safari, Chrome, Opera 브라우저는 표준 계열 브라우저로써 대부분의 HTML/CSS 코드를 표준에 따라 동일하게 렌더링 하기 때문에 표준 명세에 따라 코드를 작성하면 되고 별도의 디버깅 기법은 필요가 없습니다. 그러나 IE 6~7 브라우저는 표준 계열 브라우저들과 적지 않은 차이를 갖고 있습니다. IE 6~7 브라우저 디버깅 기법에는 다음과 같은 두 가지 방법이 있습니다.

첫째, 별도의 CSS 파일을 작성하고 IE 조건부 주석 처리

조건부 주석(Conditional Comment)이란 IE 계열 브라우저에서 IE 브라우저의 버전 타겟팅을 위해 사용하는 주석 입니다. IE 계열 브라우저들은 겨냥한 버전에 따라 주석 안쪽에 있는 내용을 해석하지만 표준 계열 브라우저들은 이 주석을 모두 주석으로 받아들여 해석하지 않습니다. IE 6~7 브라우저에 각각 대응하는 두 개의 파일을 만들고 표준 CSS 코드를 덮어쓸 수 있도록 표준 코드 아래줄에 선언 합니다.

<link rel="stylesheet" type="text/css" href="default.css" />
<!--if IE 7><link rel="stylesheet" type="text/css" href="ie7Debug.css" /><!endif-->
<!--if IE 6><link rel="stylesheet" type="text/css" href="ie6Debug.css" /><!endif-->

'if IE 7'은 IE 브라우저에서 '만약 IE 7 브라우저라면 이 주석을 해석할 것' 이라는 의미로 받아 들입니다. 결국 IE 7 브라우저는 ie7Debug.css 파일을 해석할 것이고 표준계열 브라우저는 무시할 것입니다. 이 방법의 장점은 문법적으로 유효한 CSS 코드를 얻을 수 있다는 점인데 별도의 CSS 파일을 관리해야 하기 때문에 개발 편의를 떨어 뜨리고 전송 요청 횟수를 증가시켜 웹 문서 속도에 좋지 않은 영향을 미칩니다.

둘째, 별도의 파일 작성 없이 CSS hack 을 이용

CSS 코드의 문법적 유효성을 포기하는 대신 개발 편의와 성능 향상을 위해 CSS hack을 사용하는 방법 입니다. CSS 코드의 문법적 유효성을 유지하려는 목적은 브라우저 호환성을 획득하기 위함인데 CSS 코드는 문법적으로 유효하지 않더라도 브라우저 호환성 획득이 가능하기 때문에 코드의 무결성을 고집스럽게 주장할 필요가 없습니다. 현재 CSS의 활성 표준은 2.0 인데 반해 실제로 현존하는 대부분의 브라우저들은 이미 아직 표준으로 확정되지 않은 CSS 2.1 문법을 모두 지원하고 CSS 3.0 문법을 일부 지원하고 있으므로 CSS 코드에서 표준 코드에 대한 무결성은 이미 의미가 없습니다. CSS hack이 필요한 브라우저는 오직 IE 6~7 뿐인데 다음과 같은 형식으로 디버깅 할 수 있습니다. 같은 속성을 두 번 선언하여 앞에 선언된 표준 속성을 덮어쓰기 하는 원리 입니다.

.selector { property:value; *property:value; } /* IE 7 이하의 브라우저에 작용 합니다 */
.selector { property:value; _property:value; } /* IE 6 이하의 브라우저에 작용 합니다 */