크롬(Chrome) 2.0 에서 CSS 해석 문제

얼마전 정식 출시한 구글의 웹브라우저 크롬 2.0.178.28 버전을 설치하였다. 그런데 개발중인 웹사이트를 크롬 2.0으로 테스트를 해보니 페이지 레이아웃이 상당 부분 깨져 출력되는 것을 확인하였다.

크롬의 개발자 도구로 확인해 보니 아래와 같은 문제점이 있었다.

나는 분명히 아래와 같이 CSS를 작성했는데 말이다.

@import "common.css";
@charset "UTF-8";

* {margin : 0; padding : 0; list-style:none; border:none;}
body{font:12px/1.9 gulim; word-break:break-all; line-height:160%;}
hr {display:none;}

- 후략 -

즉, common.css 스타일도 적용하면서, 모든 요소(*)의 마진, 패딩값이 없고, 리스트 스타일도 없고, 테두리도 없어야 한다. 그런데 마진, 패딩값은 물론이고 리스트스타일도 크롬의 기본값으로 해석하고 있었다.

자세히 살펴보니 * 안에 있는 내용을 무시하고 있었다. 크롬 2.0으로 다른 사이트들을 살펴봐도 문제가 있는 사이트는 발견하기 어려웠는데, 유독 내가 코딩한 페이지만 중요한 부분을 무시하여 레이아웃이 심하게 깨져버리는 문제점이 있었던 것이다.

이 문제를 해결하기 위해서는 모든 요소에 마진, 패딩값 등을 일일이 정의해 줘야 한다는 생각이 들었다. 그런데 그렇게 되면 쓸데없이 코드가 길어지고, 복잡해지는 것은 당연하다. 더욱 큰 문제는 그렇게라도 하지 않으면 크롬에서 브라우징을 제대로 할 수 없을 정도로 심각한 문제였다.


문제의 원인은 @charset

약 1시간동안 이런 저런 실험을 해보다가 다행히도 원인과 해결책을 알아냈다.

문제의 원인

크롬에서는 캐릭터셋(@charset) 정의가 문서의 맨 위에 오지 않으면 캐릭터셋 다음에 오는 CSS 한줄을 무시해 버린다.

- @charset 정의 이후에 엔터를 여러번 치더라도 이후에 오는 CSS 1줄은 무시된다. (1줄이라는 말은 시작 ( { )과 끝 ( } )을 말한다. { 와 } 사이에 엔터로 처리하더라도 마찬가지로 모두 무시된다.

통상 @charset 은 맨 위에 쓰는 것이 보통이지만, @import 도 위쪽에 쓰는 편이기 때문에, 본인의 경우엔 별 생각 없이 @import 를 맨 위에 썼더니 이런 문제가 생겨버린 것이다. 파이어폭스나 익스플로러 등 다른 브라우저에서는 찾아볼 수 없는 현상이다.

문제의 해결

캐릭터셋(@charset)을 CSS 문서의 맨 위에 선언해 주면 된다.

비교적 심각한 문제임에도 불구하고 해결법은 단순하다.