밤하늘의 실제별, 나도 가질 수 있다?!



  1. float 된 div는 display: inline;을 지정해줘야
    IE에서 margin 두배 현상이 일어나지 않는다.

    그래도 float 된 곳에는 margin을 주지 말자.

    -float: left; 일 경우, margin-left가 두배로,
    float: right;일 경우, margin-right가 두배로 늘어난다.
     
     
  2. float 했을 경우, float 준 div는 너비지정 꼭 해주자.
     
     
  3. float 된 녀석들은 해제시키는 것이 아주 중요하다.
    (float를 clear하는 4가지 방법 참고)

    float 된 div들을 감싸는 부모 div에
    overflow: hidden;을 지정해줘야 완전히 감싸게 된다.
    요걸 안줘도 감싸는 IE가 신기할세.
    이상하게 IE6에서만 감싸지 않는 현상이 생길 경우,
    width나 height를 설정해주자.-_-; (hasLayout속성 참고)

    혹은 float된 div들 끝에 의미없는
    div (clear: both;)를 추가한다.


    - Safari -
    float 된 div는 상위 div로
    꼭! 감싸주자.
    그리고
    overflow: hidden; 필수.
     
     
  4. input 박스와 확인 버튼이미지의 뒤틀어진 세로 정렬은
    vertical-align: middle;을 지정해준다.
    고럼 예쁘게 세로 중앙으로 나란히 서있게된다.

    요건 inline 요소들 밖에 적용이 안된다.

    혹은 IE에서 input 에 나타난 원치않은 margin 현상일 경우
    input 에 float: left; clear: left;(혹은 both;)를 지정해준다.
    고럼 예쁘게 윗줄(밑줄이었던가-_-)에 나란히 붙는다.
     
     
  5. IE 에서 탭메뉴 하단에 원치 않은 공간이 생긴 경우
    이미 list요소들이 float: left; 된 상황이라 inline 요소로 인식이 되지만
    혹시나 하는 마음에-
    display: inline;을 지정해서 확실히 한 후,
    line-height: 0.*em;을 지정한다. (소수점 작게작게~)

    분명 이미지탭 아래 3px 정도 공간이 생겨있을 경우가 많다.
    이건 이미지를 보통 글씨처럼 인식하는 IE의 문제이므로
    이미지에 display: block;을 넣어주거나
    이미지 상위 태그에 font-size: 0;을 넣어주면 해결이 된다.

Posted by mkyoon

2007/05/23 00:00 2007/05/23 00:00
, ,
Response
A trackback , No Comment
RSS :
http://mkyoon.com/rss/response/25

Trackback URL : http://mkyoon.com/trackback/25

Trackbacks List

  1. 유레카!!

    Tracked from 자연인 개발노트 2009/04/15 01:16 Delete

    웹갈피 개발할때, 익스플로러에서의 버그가 있었다. div박스가 두배씩 길어지던 것. 해결방법을 이제서야 알아냈다. float 된 div는 display: inline;을 지정해줘야 IE에서 margin 두배 현상이 일어나지 않는다. 그래도 float 된 곳에는 margin을 주지 말자.

Leave a comment
« Previous : 1 : ... 83 : 84 : 85 : 86 : 87 : 88 : 89 : 90 : 91 : ... 104 : Next »