MS의 인터넷 익스플로러(Internet Explorer, IE)는 참 속 썩이는 웹브라우저 입니다. 윈도8의 등장과 함께 벌써 버전 10까지 출시되었지만 제약도 많고 버그도 많아 여전히 웹 개발자들의 속을 썩이고 있죠. 특히 CSS에 대한 버그는 아예 IE전용 핵을 써야 할 정도로 무궁무진합니다. 아마 IE에서 나타나는 CSS 관련 버그들만 모아도 책 한권은 쓰지 않을까요?
이러한 CSS 관련 버그들의 가장 큰 문제점은 '다른 웹브라우저들과 다른 결과물을 보여준다'는 것입니다. 여백이 두 배로 뻥튀기 되거나, 정렬이 맞지 않거나, 사이즈가 다르게 보이거나 하는 문제들 말이죠(물론 IE9 이후엔 많이 나아졌다지만). 그 중에는 정말 미묘한 차이로 인해 '버그 맞나?' 싶은 것들도 있습니다. 오늘 알아볼 line-height 1px 버그와 같이 말이죠. 몇몇 블로그에 소개되어 있긴 하지만 왜 일어나는지, 해결책은 무엇인지 등을 찾기가 어렵습니다. 버그가 아닌 '브라우저 특성'으로 여기는 분들도 있고요.
NHN의 NULI 블로그 http://html.nhncorp.com/blog/721 에 대략 어떤 문제인지 소개되어 있습니다(2월 4일에 리뉴얼을 했군요. 도메인이 바뀌었다니...).
IE에서 한글폰트를 쓸 때 line-height 정렬이 1px 위로 올라가져 보이는 문제입니다. IE의 한글폰트 베이스라인이 타 브라우저와 다르게 설정되어 있다는 얘기가 있더군요. 그래서 글꼴 크기와 line-height가 같을 경우, 텍스트가 아예 박스를 뚫고 나오는 경우가 생깁니다. 만약 border를 지정했을 경우, 텍스트가 border위로 올라와 버리죠. 아래 예를 보면 이해가 쉬울 텐데요, 크롬이나 파이어폭스에선 빨간선 안쪽으로 텍스트가 보일 것이고, IE에선 빨간선 윗부분이 텍스트에 가려지게 됩니다.
※ 덧) 글꼴에 따라 다르게 보일 수 있습니다. 이 글을 쓴 시점에는 돋움/굴림을 썼는데, 맑은 고딕으로 바꾼 지금은 오히려 IE쪽이 제대로 보이고 크롬 쪽에서 하단 border가 텍스트에 의해 침범당하게 됩니다. 어쨌든 브라우저에 따라 1픽셀 정도는 차이가 나네요. (2015.03.11 업데이트)
무궁화 꽃이 피었습니다.
그런데 어느 날, Daum의 메인을 보다 의아한 생각이 들었습니다. IE에서도 line-height가 모두 제대로 먹혀있더군요. CSS핵을 사용했나 싶어 찾아봤지만 그런 건 없었고, 별다르게 적용한 스크립트도 없어 보였습니다. 제가 작업하던 사이트와의 차이점은 단지 Doctype과 인코딩 뿐. 그런데 Doctype도 문제는 아니었습니다. HTML4든 HTML5든 상관없었죠.
그래서 테스트를 해봤습니다. 두 개의 HTML문서를 만들고 똑같은 내용과 CSS를 넣은 뒤, 인코딩만 다르게 했죠. 다른 조건을 똑같이 맞추기 위해 normalize.css를 적용했습니다. 아래 zip파일이 그것입니다.
https://www.dropbox.com/s/i3qfbhbui1qq2vp/line-height%20bug.zip
재미있는 결과가 나왔습니다. 우선 타 브라우저와의 차이는 차치하고서라도, 같은 IE에서 각각 다른 결과가 나왔습니다. 보시다시피 euc-kr일 때와 utf-8일 때의 텍스트 위치가 다릅니다. IE9에서는 line-height의 차이만 있는 거 같고, IE8에서는 제목으로 쓴 h1의 여백도 약간 다르게 표시되는 것 같네요. 그런데 IE8에서는 빨간선 테두리 안으로 텍스트가 나왔는데, IE9에선 또 올라가 버립니다. 이러면 타 브라우저와는 2px이나 차이난다는건데... 아무래도 인코딩에 따라 base-line이 다르게설정되는 거거 아닌가 싶습니다.
따라서, line-height 1px 문제가 발생시 인코딩에 대한 것도 고려해야 하겠습니다. CSS 핵을 쓰든 아예 포기하든 참고가 되었으면 좋겠네요.
글
