티스토리와 IE 버그의 묘한 합체: Syntax Highlighter 오류

제목 참 어려운데… 내용도 비슷하게 어려운 이야기…

본 블로그는 Syntax Highlighter를 티스토리에 적용해서 쓰고 있다.
그런데, 티스토리는 2011년 4월 7일부로 나름 안정적이던 구관리 모드를 버리고, 신관리 모드만 지원한다.
그리고, 이 신관리 모드에서 Syntax Highlighter를 사용하면 IE에서만 이상한 문제가 발생한다.

아래와 같이 행이 한줄 더 떨어진다는 것.

IE8만 이렇고, IE9에선 정상적으로 나옴. 알 수 없는 IE의 세계

이 문제가 발생하는 메커니즘은 이렇다.


1. 티스토리의 버그

티스토리는 행이 <br />로 끊어지면 무조건 엔터(\n)를 추가한다.
이건 <pre> 태그 내에서도 예외 없이 적용된다.
문제는 <pre>는 그렇게 동작하면 절대 안된다는 것.
<pre>는 <br />과 \n을 모두 엔터로 인식하기 때문에 엔터가 두 번 들어가게 된다.

이게 뭐냐! 티스토리!!

2. IE의 버그

IE엔 이해는 전혀 할 수 없는 버그가 있다. (그런게 한둘은 아니지만)
<pre> 내에 <br />\n의 이중 엔터가 있으면 알아서 둘 사이에 공백을 추가한다.
즉, <br />(공백)\n으로 만들어버린다.

이로 인해 Syntax Highlighter에서 Blogger mode를 설정해도 <br />을 제거하지 못하게 되는 것이다.

덧. IE9에선 슬쩍 이 문제를 수정해서 공백을 추가하지 않는다.