티스토리 뷰
크롬의 개발자 도구로 확인해 보니 아래와 같은 문제점이 있었다.
나는 분명히 아래와 같이 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;}
- 후략 -
@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) 정의가 문서의 맨 위에 오지 않으면 캐릭터셋 다음에 오는 CSS 한줄을 무시해 버린다.
- @charset 정의 이후에 엔터를 여러번 치더라도 이후에 오는 CSS 1줄은 무시된다. (1줄이라는 말은 시작 ( { )과 끝 ( } )을 말한다. { 와 } 사이에 엔터로 처리하더라도 마찬가지로 모두 무시된다.
통상 @charset 은 맨 위에 쓰는 것이 보통이지만, @import 도 위쪽에 쓰는 편이기 때문에, 본인의 경우엔 별 생각 없이 @import 를 맨 위에 썼더니 이런 문제가 생겨버린 것이다. 파이어폭스나 익스플로러 등 다른 브라우저에서는 찾아볼 수 없는 현상이다.
문제의 해결
캐릭터셋(@charset)을 CSS 문서의 맨 위에 선언해 주면 된다.
캐릭터셋(@charset)을 CSS 문서의 맨 위에 선언해 주면 된다.
비교적 심각한 문제임에도 불구하고 해결법은 단순하다.
'CSS/UI' 카테고리의 다른 글
IE6에서 a태그 사용시 밑줄이 너무 붙어버리는 현상 (0) | 2010.01.18 |
---|---|
IE6에서 div가 select에 가려지는 현상 해결법 (0) | 2010.01.05 |
IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그 (4) | 2009.06.15 |
크롬(Chrome) 2.0 에서 CSS 해석 문제 (1) | 2009.05.28 |