익스플로어 6, 8 높이 잘못 계산하는 문제...
삐용삐용
다른 브라우져들은 잘 되는데 IE 6, 8 버전만 높이를 잘못계산해서 2px정도 뜨네요...
작업개요는 컨텐츠영역에 이미지가꼭 맞으면 스크롤없이 보여주고, WIDTH값은 고정이기 때문에Y축으로클 때는 Y축 스크롤이 자동으로 생기도록 합니다.
그림보시면 하단에 빨간색 줄이 이유없이 늘어난 부분입니다.
웃긴건... 소스가 이렇게 되는데
div id=content
img src=setting/images/img3.gif /
/div
이렇게 고치면
div id=contentimg src=setting/images/img3.gif //div
스크롤이 안생깁니다. ㅡㅡ; 어이없네요..
소스도 같이 올려봅니다.
-
방방 2023-08-16
인라인 요소의 개행을 공백으로 인식하는 부분 때문 아닐까요? 보통 특별히 문제 없으면 display:block 속성 추가로 해결이 되죵...
-
앨버트 2023-08-16
display:block 이였군요... 이것 때문에 한참 헤맸어요...
n수다님 감사합니다. -
진샘 2023-08-16
img에 왜 display:block인지 모르겠습니다.
그리고 #content img { display:block; }
는 돼는데
#content img { line-height:0; font-size:0; }
이것은 안먹히던데요 ㅠㅠ -
도손 2023-08-16
그리구요, 이미지로 넣어놨는데 font-size: 0으로 주는 이유는 진짜모르겠어요.
글자가 없고 단지 이미지일 뿐인데 font-size: 0 ; 속성이 왜 들어가야하는지.... -
샤인 2023-08-16
밑에 있는 거는 vertical-align:top;을 하나 추가해야 ie6에도 적용되네요. 쏘리용~^^ 제가 확인을 ie8만 했더니........img는 인라인 속성을 가지고 있어요. 그래서 브라우저마다 3~4px정도의 여백이 조금씩 생겨요. g나 j같은 아랫첨자의 공백을 미리 잡아두는 녀석이 있다는 거죠. 그래서 display:block으로 줘서 img의 속성을 블럭으로 바꿔주거나 line-height:0; font-szie:0; vertical-al
-
셋삥 2023-08-16
#content img { display:block; } 또는 { line-height:0; font-size:0; vertical-align:top; }를 넣어주면 해결 될 것 같은데요..