IE7에서 float:right 버그에 관한 초간단 팁.

블랙스완

· 12년 전 · 조회 15278 15278 · 댓글 10 10

표준 코딩을 하다보면 float를 많이 사용하게 되는데요.

이전에는 꽤 괜찮다고 생각했던 IE7에서 오류들이 많이 발생합니다.

<style>
.wrap { float:left; width:100%; }
.left { float:left; }
.right { float:right; }
</style>
<div class='wrap'>
<div class='left'>
aaaa
</div>
<div class='right'>
bbbb
</div>
</div>

이와 같은 코딩에서 좌우로 float을 줄 경우에

IE7에서는 float:right 한 부분이 left 아래로 떨어지는 현상이 발생합니다.

이럴때는 wrap에 overfloat:hidden 을 추가해주면 간단히 해결됩니다.^^

그 밖에도 IE7에서 float:right 버그가 여러개 있는 것 같은데

검색엔진에서 검색하면 아쉽게도 영문자료들만 많이 나오네요 ㅠ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 10개

쉽다zzz

프로필 보기 이 회원 글보기

12년 전

감사합니다.

asdfg

프로필 보기 이 회원 글보기

12년 전

감사~

지운아빠

프로필 보기 이 회원 글보기

12년 전

모든 doctype 을 테스트해보지는 않았습니다만, IE7 이하에서는 width 속성값 없이 float 속성값을 사용하면 해당 증상이 나타나는 것으로 알고 있습니다.
div 와 같이 기본 display:block 속성을 가진 요소에 대하여 나타나는 것으로 알고 있습니다.

kiplayer

프로필 보기 이 회원 글보기

12년 전

지운아빠님 의견에 찬성 ㅎㅎ
^^ overflow 를 하지 마시고 width: 를 넣으시면 해결 됩니다. ㅎ
그리고 제가 쓰는 방법으로는 float 속성사용시 불가능하지 않다면 width: 를 주고
바로 밖에 있는 레이어에 height 속성을 넣어놓습니다. 그래야 float 사용으로 남은 공간에 불필요한 끼거나 화면에 문제가 없도록 사용합니다.

화랑댐

프로필 보기 이 회원 글보기

12년 전

저도 지운아빠님 생각에 찬성합니다.

플롯 속성 특히 ie7에서는 width값이 들어가야지 정확하게 자기의 사이즈를 알고 포지션을 잡죠

overflow:hidden이 꼼수이긴하나 정확하게 집고 가자면 width값을 넣어주면 되는걸로 알고 있습니다.

불량학생

프로필 보기 이 회원 글보기

12년 전

float:left와 float:right를 여러번 사용했을경우 예기치 못한 버그들이 많이 발생하지요
많이 쓰지 않는게 좋습니다

돼지코구뇽

프로필 보기 이 회원 글보기

12년 전

오우..overfloat:hidden .. 기발합니다

takumi22

프로필 보기 이 회원 글보기

12년 전

정보 고맙습니다

port

프로필 보기 이 회원 글보기

12년 전

좋은 정보 감사합니다.

새내기

프로필 보기 이 회원 글보기

12년 전

플로트 해제 방법이네요. 감사합니다!!

게시글 목록

번호	제목	글쓴이	조회	날짜
2952	HTML zencoding	IAMA	1,573	8년 전
2951	HTML 정렬되지 않은 HTML 목록 ul li	컴프	2,309	8년 전
2950	HTML html table 2	컴프	2,102	8년 전
2949	HTML HTML Table 1	컴프	1,918	8년 전
2948	HTML HTML 파일 경로	컴프	2,419	8년 전
2947	HTML HTML <script> 태그	컴프	1,956	8년 전
2946	HTML Iframe 구문	컴프	2,573	8년 전
2945	HTML html 하이퍼링크2	컴프	2,576	8년 전
2944	HTML html 하이퍼링크 1	컴프	2,503	8년 전
2943	HTML HTML comment 태그	컴프	1,706	8년 전
2942	HTML HTML abbr address cite bdo	컴프	1,700	8년 전
2941	HTML HTML <code> For Computer Code	컴프	1,442	8년 전
2940	HTML HTML Computer Code Elements	컴프	1,467	8년 전
2939	HTML 짧은 인용문을위한 HTML	컴프	2,060	8년 전
2938	HTML HTML 서식 예제	컴프	1,673	8년 전
2937	HTML HTML 서식 요소	컴프	1,742	8년 전
2936	HTML Emmet 코딩시간을 단축시켜주는....	IAMA	1,753	8년 전
2935	HTML HTML 줄 바꿈	컴프	2,391	8년 전
2934	HTML The HTML <head> Element	컴프	1,783	8년 전
2933	HTML Headings 에 중요성	컴프	2,189	8년 전
2932	HTML HTML 스타일 속성	컴프	1,965	8년 전
2931	HTML HTML <pre> 요소	컴프	1,995	8년 전
2930	HTML HTML 줄 바꿈	컴프	1,940	8년 전
2929	CSS CSS를 삽입하는 3 가지 방법	컴프	2,334	8년 전
2928	CSS CSS 코멘트 삽입	컴프	2,243	8년 전
2927	CSS CSS 기본 문법	컴프	2,332	8년 전
2926	HTML HTML addr	컴프	1,947	8년 전
2925	HTML HTML 서식 요소	컴프	1,806	8년 전
2924	기타 디바이스별 해상도	컴프	2,365	8년 전
2923	HTML HTML 이미지 img 태그	컴프	1,992	8년 전

이전 다음

14 15 16 17 18

전체 목록

강좌