따라쟁이

2008. 5. 7
본 포스트는 전반적으로 잘못 이해된 사항을 기반으로 작성되었습니다. 제목에서 IE에서의 오류라고 되어 있는데, 오류인지는 잘 모르겠지만 일단 모든(IE, FF, Safari)에서 동일하게 동작합니다. 제 생각에는 정상적인 동작이라고는 생각되지 않습니다. 브라우저는 response type이 text/css인 경우에만 css로 해석해야 올바르지 않을까요? 그리고 redirect시에만 발생하는 것처럼 글 이 작성되었는데 redirect와 무관하게 발생합니다.

어쨌든 결론은 “존재하지 않는 css를 link로 참조하면 의도하지 않은 스타일이 적용될 수 있다” 입니다.

최근 스킨을 적용하기 위해 css를 dynamic하게 생성하도록 하는 페이지를 만들다 발견된 현상입니다.

IE에서 <link>로 요청된 css가 redirect된 경우 redirect된 resource가 css(mime type이 text/css)가 아닌 경우에도 해당 resource를 해석하여 css로 처리하는 현상이 있는 것으로 보입니다.

Daum 사이트에서는 파일이 존재하지 않는 경우 http://status.daum.net/error/error404.html 로 redirect 되는데, 다음 코드와 같이 존재하지 않는 css 파일을 요청할 경우 위에서 언급한 문제가 발생합니다.

[source:html]

[/source]

http://status.daum.net/error/error404.html 페이지의 코드를 보면 style이 페이지에 포함되어 있는데, 위 코드에서 div의 id로 지정한 #B_C selector 가 존재합니다. 따라서 위 페이지를 Internet Explorer에서 볼 경우 color와 font-size가 error404.html에서 정의한데로 출력되는 것을 볼 수 있습니다.

[source:html]

[/source]

위 코드는 error404.html에 포함된 #B_C selector 관련 스타일이며, 다음 그림은 ie7에서 위 html 페이지의 출력 결과입니다.

의문사항

• redirect된 대상이 html인 경우에만 발생하는지?
• html인 경우에만 발생한다면, redirect된 html에서 또 다른 스타일시트를 link로 참조한 경우에는 어떻게 될것인지?

저는 Firebug를 무지무지하게 잘 활용하고 있었는데 요즘 들어 이상한 현상이 발생해 답답해 하고 있었습니다. 제목처럼 <a> 요소에 대해 inspect가 되지 않는 현상이 일어나고 있습니다.

일할때는 관성의 법칙이 작용하는지라 원인을 찾아볼 생각을 못하고 있다가 이제야 시간이 나서 Firebug discuss에 가보니 관련 글이 올라와 있네요.

결론적으로 말하면 Firefox가 2.0.0.12으로 업데이트 되면서 생겨난 문제로, fix되었고 2.0.0.13에 반영될꺼라고 합니다. 이번 2.0.0.12로의 업데이트가 주로 보안과 관련된 부분이었다고 들었는데, 수정하면서 발생한 side-effec인가 봅니다. 자세한 토론 내용을 이해하고 싶은데 암만 읽어봐도 무슨 소리들을 하는지 모르겠네요.

Bugzilla에 [FIX]2.0.0.12 causes <a> elements not to be recognised when inspected in firebug라는 제목이 달린거 보니 일단 해결된걸로 보입니다. 이 문제로 괴로워하시는 분들 있으면 참조하시고, 2.0.0.11로 재설치하시던지 2.0.0.13을 참고 기다리는 수 밖에 없을거 같습니다.

해당 이슈에 관한 글은 Google code – fbug – issue 452와 Bugzilla@Mozilla – Bug 416896를 참조하세요.