웹마스터 팁
레이 아웃이 가로 가운데일 때 좌우 왔다 갔다 하는 문제
2009.07.09 15:55
안녕하세요.
이틀 고생해서 문제 해결 했습니다.
혹~ 다른 분들도 저 처럼 고생 하실 까봐~ ^^!
레이아웃을 가운데 정렬로 사용하실 때 이상하게 어떤 페이지에서는 좌측으로 조금 움직이고
어느 페이지는 움직이지 않고 그럴 때 있죠?
원인은 IE 8.0 에 있었습니다.
페이지 세로 길이가 짧아 한눈에 다 보이면 IE 8.0 에서는 우측 스크롤 바를 표시하지 않습니다.
반대로 세로 길이가 길어지면 우측 스크롤 바가 표시 되겠죠!
이때 페이지가 가로 가운데 정렬이라면 우측 스크롤 바 없을 때의 가운데와 있을 때의 가운데 좌표가 당연히 달라져서
페이지에 따라 레이아웃이 좌, 우로 왔다 갔다 하는 현상이 생긴 것입니다.
IE 7.0, IE6.0 에서는 세로 페이지가 짧아도 일단 우측에 스크롤 바는 존재 합니다. 그렇기 때문에 문제가 발생 되지 않았던 거죠.
암튼 IE 8.0 에서의 스크롤 바 문제 해결을 위해선 세로 스크롤바를 항상 표시 해 주면 된다는 거죠.
<style>
html { overflow-y: scroll; }
</style>
이것만 넣어 주면 IE7.0과 6.0 처럼 항상 세로 스크롤바 표시 됩니다.. ^^! (이미 알고 계시다면.. 패스... )
P.S.: 레이아웃 만들다 보니 IE 8.0 이 얼마나 웹표준에 충실 한지 깨달 았습니다. 이전 버전들 호환성 땜에 아주.. 고생 했습니다.
댓글 5
-
리우
2009.07.10 18:07
-
제시카
2009.07.25 22:34
고민했었는데 감사합니다.
-
전인찬
2009.12.01 17:51
파이어폭스에서도 같은 동작을 보입니다.
이 방법으로 해결했습니다. 감사합니다.
-
반달
2010.02.02 12:22
너무 감사합니다. 아니었다면
하루 종일 고민할뻔 했네요.
고맙습니다~!!!
-
오실롯
2010.06.29 05:02
위 방법을 사용하면 IE8에선 세로스크롤이 정상정으로 고정되나 IE7 이하에선 짧은 문서일 경우 세로스크롤바가 두개가 생기는 현상이 발생합니다. 이를 해결하기 위해선 css 핵을 사용하셔야 됩니다.
8.0 뭐꼬 ^^ ㅎㅎ
그렇다면 나머지 브라우져(닉스플로러, 파이어폭스, 샤파뤼, 넷스케이프, 구글크롬, 오페라) 에서는 무조건
스크롤바가 있다는 얘기겠네요...
좋은 정보 감사합니다.....