테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

블랙스완
프로필 보기이 회원 글보기
 · 12년 전 · 8446 · 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 사용으로 남은 공간에 불필요한 끼거나 화면에 문제가 없도록 사용합니다.
화랑댐
프로필 보기이 회원 글보기
 11년 전
저도 지운아빠님 생각에 찬성합니다.

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

overflow:hidden이 꼼수이긴하나 정확하게 집고 가자면 width값을 넣어주면 되는걸로 알고 있습니다.
불량학생
프로필 보기이 회원 글보기
 12년 전
float:left와 float:right를 여러번 사용했을경우 예기치 못한 버그들이 많이 발생하지요
많이 쓰지 않는게 좋습니다
돼지코구뇽
프로필 보기이 회원 글보기
 12년 전
오우..overfloat:hidden .. 기발합니다
takumi22
프로필 보기이 회원 글보기
 12년 전
정보 고맙습니다
port
프로필 보기이 회원 글보기
 12년 전
좋은 정보 감사합니다.
새내기
프로필 보기이 회원 글보기
 12년 전
플로트 해제 방법이네요. 감사합니다!!

게시글 목록

번호 제목
20318
기타 css 마우스 오버, 테두리
20317
JavaScript 키보드,마우스 등 불펌방지 입니다.
20316
JavaScript 해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
20315
JavaScript 특정페이지에서 자동으로 새로고침 하기 입니다.
20314
JavaScript 마우스 오버시 이미지 안쪽에 테두리주기
20313
node.js git 사용메뉴얼 보면 깝깝 하네요
20312
PHP 그림자가 있는 글자 표현하기 입니다.
20311
PHP css로 테이블 만들기 입니다.
20310
JavaScript 간결한 레이어 메뉴 입니다.
20309
PHP 테이블 셀 배경이미지 정렬하기 입니다.
20308
웹서버 포트별 Virtual Host 설정하기 입니다.
20307
JavaScript 실시간 카운트 다운 시계 입니다.
20306
jQuery jQuery, 이미지맵 마우스오버시 하이라이트 표시
20303
PHP 이미지가 없으면 나오는 X대신 다른이미지넣기 입니다. 2
20302
웹서버 가상호스트 무단링크 막기 입니다.
20301
웹서버 대량의 서브도메인 생성 DNS 아파치 설정하기 입니다.
20300
JavaScript 한번만 submit 되게 하기 입니다.
20299
JavaScript 영문자나 숫자만 입력 할 수 있게 하기 입니다.
20298
JavaScript 현재 페이지 이메일로 보내는 버튼 만들기 입니다.
20297
JavaScript 모바일웹에서 PC버전 링크
20296
JavaScript 특정 파일형태만 업로드 하기 입니다.
20295
JavaScript 입력 문자열 앞에 붙는 공백 제거하기 입니다.
20294
JavaScript 키보드 방향키로 창의 위치를 이동시키기 입니다.
20293
PHP 게시판 목록에서 원하는 데이터만 출력이 가능하게..
20292
MySQL mysql SELECT 결과값을 UPDATE하기
8222
웹, 안드로이드,iOS 함께 할 분 찾고 있습니다. 8
20291
JavaScript 키보드 눌러 이동하는 단축키 사용하기 입니다.
20290
JavaScript 책장을 넘기는 것같은 이미지 슬라이드 쇼 입니다.
20289
JavaScript 마우스를 대면 링크 이미지들을 보여주기 입니다.
20288
PHP pushbullet 푸시 발송
20287
MySQL 같은 컬럼의 행들을 한번에 UPDATE 하기
20286
JavaScript 이미지들을 보여주는 풀다운 콤보메뉴 입니다.
20285
JavaScript 부드럽게 오버랩되는 이미지 슬라이드 쇼 입니다.
20284
JavaScript 끊김없이 연속적으로 스크롤 되는 이미지 스크롤러 입니다.
20283
PHP php 주요 정리 입니다.
20282
PHP 메타태그 주요정리 입니다.
20281
JavaScript 광고나 공지사항 띄울때 다음부터 이창을 띄우지 않기 입니다.
20280
MySQL 테이블 생성, 컬럼 추가, 삭제, 수정
20276
JavaScript 입력값을 형식에 맞게 해주는 플러그인이네요 3
20275
JavaScript 팝업창에서 오늘 하루 이 페이지 열지 않기 체크박스 사용입니다.
20274
JavaScript 팝업창 하루에 한번만 열기 입니다
20273
PHP 테이블 사이즈를 제어하기 입니다.
8216
php에서 태그 안의 내용만 지우려고 하는데요. 5
20272
jQuery 유투브 관련 플러그인
20271
jQuery input 태그에 readonly 추가하는 방법
20270
기타 알툴바로 인한 스크립트 오류
20269
jQuery jquery checkbox(radio) 체크유무확인
20268
jQuery 자주 쓰이는 Jquery 팁 20가지 입니다.
20267
jQuery jQuery 오른쪽 퀵메뉴 입니다.
20265
jQuery textarea 글자수 카운트 입니다. 1
20264
jQuery ifrmae 자동 리사이즈 jQuery 입니다.
20263
jQuery 슬라이딩 형태로 보여주기 입니다.
20262
jQuery 라인 그래프 그리기 입니다.
20261
jQuery 콤보박스관련 플러그인
20259
MySQL MySQL 기본 명령어 정리 입니다. 1
20258
MySQL MySQL 한글 정렬하기 입니다.
20257
MySQL 그림을 MySQL DB에 저장하는 방법
20256
JavaScript 엑셀 흉내내기
20255
MySQL mysql table 유무 확인 하기 입니다.
20254
MySQL php로 만든 MySQL 백업스크립트 입니다.
20253
MySQL 2개 테이블에서 중복된거라도 한개씩만 추출하기 입니다.
20252
MySQL MySQL php함수 정리 입니다.
20251
MySQL MySQL php오류 정리 입니다.
20250
MySQL 연산자 관련함수 정리 입니다.
20249
JavaScript 폼 유효성검사해주는 자바스트립트 라이브러리
31028
기타 텝메뉴 상단고정 및 해당위치 스크롤 4
20248
MySQL 수학 관련함수 정리 입니다.
20247
MySQL 문자열 관련함수 정리 입니다.
20246
MySQL 날짜 관련 함수 정리 입니다.
8215
hostbill, isp system, WHMCS, root panel 결제관련
20245
PHP PHP5.6 -> PHP7.0 으로 이전시 차이점
20244
jQuery Ajax 화면 전환 시 애니메이션 효과
20243
MySQL Query의 기본사용 정리 입니다.
20242
MySQL 자주 사용하는 php와 관련 Query문 입니다.
20241
MySQL 콘솔 기본명령어 정리 입니다
20240
PHP 암호화 SHA-256
20239
MySQL mysql 인덱싱 하는 방법 입니다.
20238
MySQL MySQL 덤프방법(dump) 입니다.
20237
MySQL 여러데이터베이스 사용하는 방법 입니다.
20236
PHP 이미지에 글자쓰기
20235
MySQL 백업&복구(전체/부분/테이블) 하기 입니다.
20234
MySQL db sql문 정리 입니다.
20233
MySQL MySql 암호 초기화 및 새암호 넣기 입니다.
8197
JavaScript로 Class 없이 OOP 하기 17
20232
JavaScript 라디오버튼, 체크박스 테두리 없애기 입니다.
20231
JavaScript 현재 페이지 저장하기 입니다.
20230
JavaScript 프린트 출력 자바스크립트 입니다.
20229
JavaScript 한글만 되게 하는 자바스크립트 입니다.
20228
JavaScript 간단한 팝업창 중앙에 띄우기 입니다.
20227
JavaScript 2단계 드롭다운 레이어 메뉴 입니다.
20225
JavaScript 동적 막대그래프 1
20224
JavaScript 간단한 위로가기 자바스크립트 입니다.
20223
JavaScript 따라다니는 link 퀵메뉴 입니다.
20222
JavaScript 글씨의 색을 자동으로 변환시켜주는 자바스크립트 입니다.
20221
JavaScript 인스타그램 사진가져오기
20220
jQuery checkedbox 컨트롤
20219
jQuery radio 컨트롤
20218
jQuery select box 컨트롤
20217
jQuery 강력한 Select Box 디자인 플러그인 Select Or DIE
20216
node.js Node.js - 실시간 위치 추적 (2)
이전 다음
전체 목록