- float 된 div는 display: inline;을 지정해줘야
IE에서 margin 두배 현상이 일어나지 않는다.
그래도 float 된 곳에는 margin을 주지 말자.
-float: left; 일 경우, margin-left가 두배로,
float: right;일 경우, margin-right가 두배로 늘어난다.
- float 했을 경우, float 준 div는 너비지정 꼭 해주자.
- 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;필수.
- input 박스와 확인 버튼이미지의 뒤틀어진 세로 정렬은
vertical-align: middle;을 지정해준다.
고럼 예쁘게 세로 중앙으로 나란히 서있게된다.
요건 inline 요소들 밖에 적용이 안된다.
혹은 IE에서 input 에 나타난 원치않은 margin 현상일 경우
input 에 float: left; clear: left;(혹은 both;)를 지정해준다.
고럼 예쁘게 윗줄(밑줄이었던가-_-)에 나란히 붙는다.
- IE 에서 탭메뉴 하단에 원치 않은 공간이 생긴 경우
이미 list요소들이 float: left; 된 상황이라 inline 요소로 인식이 되지만
혹시나 하는 마음에-display: inline;을 지정해서 확실히 한 후,line-height: 0.*em;을 지정한다. (소수점 작게작게~)
분명 이미지탭 아래 3px 정도 공간이 생겨있을 경우가 많다.
이건 이미지를 보통 글씨처럼 인식하는 IE의 문제이므로
이미지에 display: block;을 넣어주거나
이미지 상위 태그에 font-size: 0;을 넣어주면 해결이 된다.
Posted by mkyoon
