2009년 4월 1일 수요일

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는 약간의 시험과 변형을 거친 후 공개하도록 하겠습니다.


댓글 8개:

  1. 앗 저는 IE7은 무겁게 느껴져서 기본으로 IE6을 씁답니다.

    죄송한 마음 x 100 ㅠ.ㅠ

    (대신 FireFox는 항상 최신버전 ㅋ)

    답글삭제
  2. 고생하셨네요. 저도 경험한 적 있어서 항상 태그는 소문자로 하지요.

    추가로 경험한 것이..

    IE에서 자바스크립트는 한줄짜리 if문이 제대로 안될 때가 있어요. 꼭 중괄호를 애용하시길 바래요 -_-;

    답글삭제
  3. 아아~ 그게 이런 거였군요...(마치 알겠다는듯)

    답글삭제
  4. @Samuel - 2009/04/02 15:28
    고맙습니다. 습관처럼 중괄호를 썼는데, 계속 써야겠군요.

    답글삭제
  5. @구차니 - 2009/04/02 11:50
    핫! 제가 죄송...

    답글삭제
  6. 하아... 고생하셨습니다ㅠㅠ

    제가 다니는 학교의 모든 컴퓨터는 IE6로 고정되어있더군요ㅠㅠㅠ 제발 업그레이드좀 하지...에휴

    답글삭제
  7. @Ludens_ - 2009/04/05 18:26
    이상하게도 전산쪽 관리자들도 IE6에 대한 환상이 많더군요. 에효~

    답글삭제