당근천국
오늘
어제
전체
본문에 별다른 표시가 없을시 이 조건을 사용합니다.
2012. 12. 24. 15:00
익스플로러 계열에서는 정상적인 CSS가 먹히지 않는 현상이 있습니다,
이런게 한두개가 아니긴 하지만 이 경우는 어떤 경우인지 알아봅시다.
1. 문제의 발견
아래코드로 html파일을 만들어 돌려봅시다.
<body leftmargin=0 topmargin=0 style='background-repeat:repeat-x'>
<div id="quick" style="width:100%; top:0px; left:0px;z-index:1000;position:fixed">
<div style="width:100%;z-index:1000">
aaaaaaaa
</div>
</div>
<div style='height:40px'></div>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 align=center width=940>
<TR>
<TD align=center style='padding:10 0 20 0'>
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<a href=index.php><img src='' width=202></a></TD>
<TD align=right>
<span style='border:1px #cecece solid;'></span></TD>
</TR>
</TABLE>
</TD>
</TR>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />귀찬으신 분들을 위한 파일 :
ei_error1.html
다운로드
해당 파일을 다시 크롬에다 돌려보면 차이가 확실이 납니다.
'aaaaaaaa'
가 크롬에서는 고정되는데 익스플로러에서는 고정되지 않습니다.
이렇게 말이죠.
2. 해결방법
이렇게 되는 이유는 익스플로러의 경우 HTML코드가 정상적인 패턴을 가지고 있지 않으면 이전코드(익스플로러 7 이전버전들)로 작성된것으로 판단하여 호환모드가 강재로 적용되기 때문에 그렇다고 합니다.
이런 현상을 막기위해서는 문서형식을 지정하면됩니다.
( 참고 : 위키백과 - 문서 형식 선언 )
이 코드에서 문제가 되는 코드는
"position:fixed"
입니다.
이 코드를 동작시키기 위해서는 'HTML 4.01' 문서 형식이 필요합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">ei_error2.html
다운로드
이제 아까 만든 파일의 맨위에 문서형식을 추가한후 테스트 해봅시다.
정상적으로 작동합니다.
마무리
보통 이런 코드들은 익스플로러 이전버전들(IE7, IE6 등등)에서 문제를 일으키게 됩니다.
이런 경우 문서형식을 지정하면 거의 같은 동작을 합니다.
이전 버전들의 호환성을 무시한다면 코드자체에 오류만 없도록 하여도 이런 문제는 발생하지 않습니다.
이전 버전들의 호환성을 염두해두신다면 문서형식을 지정해 두는 것이 좋죠.
핫 포스팅
