innerHTML에서 다시금 느낀 "난 IE가 싫어!"

우리나라의 국민 웹브라우저는 물론 IE입니다.
그것도 문제투성이인 IE6가 이상하게도 IE7을 제치고 점유율 1위입니다.
(IE7은 안정성에 문제가 있어 신뢰성 있는 IE6을 쓴다는 분들을 보면 가슴이 답답합니다)

WP-Cumulus를 TiStory에서 사용할 수 있도록 작업을 하면서보니 FF, 크롬에선 문제없는 코드가 이상하게 IE에서만은 동작하지 않는 문제를 경험했습니다.

그래서 아래의 코드를 innerHTML로 추출해서 눈으로 확인해봤습니다.

<TAG><a href="/tag/123" style="font-size:12pt">123</a></TAG>

아래 화면은 위의 코드를 크롬에서 다시 화면에 띄운 것입니다.
모든 태그와 속성을 소문자로 변환해서 처리한다는 것을 알 수 있습니다.

다음은 Firefox 3.0에서 띄운 화면입니다.
역시 소문자로 변환합니다. 따라서 크롬과 거의 똑같이 처리한다는 것을 알 수 있습니다.

하지만...
IE에서 같은 함수를 돌려보면 결과가 다릅니다.

네. 모든 태그와 속성을 대문자로 처리합니다.

물론 HTML은 대소문자를 가리지 않습니다만, 대문자의 사용은 W3C의 권고사항에도 정면으로 배치되는 것으로 W3C에서는 XHTML을 위해 소문자를 권고하고 있습니다.

이점은 MSDN을 읽어보면 명확해지는데, MSDN에서는 모든 태그와 속성을 대문자로 표시하고 있습니다.


Cumulus의 플래쉬는 (PHP를 통해) 소문자가 입력된다는 가정하게 개발이 되었기 때문에 IE의 javascript에서는 정상동작하지 않았던 것이었던 거죠.
(작업을 쉽게 하기 위해) 모든 대문자를 소문자로 일괄 변환해버리면 태그 자체에도 영향을 미치기 때문에 결국 <A>와 <TAG> 등의 태그만 일일이 소문자로 변환해 문제를 해결했습니다만, IE 덕분에 시간을 낭비한 것을 생각하면...

덧. 이렇게 힘겹게 변환된 티스토리용 Cumulus는 약간의 시험과 변형을 거친 후 공개하도록 하겠습니다.