li (List)로 탭메뉴를 만들때 IE 에서만 공백이 보여요!
- Posted at 2007/10/22 17:29
- Filed under 어리버리/이건뭐야?
<ul>
<li>탭 메뉴 1</li>
<li>탭 메뉴 2</li>
<li>탭 메뉴 3</li>
</ul>
li {
float: left;
}
위와 같은 메뉴를 만들면
ul 아랫 부분에 3~5px 정도 공간이 뜨게 된다.
이럴때 쓰는 방법 2가지.
1. line-height: 0.*em; 또는 font-size: 0px;
li {
float: left;
line-height: 0.5em;
font-size: 0px;
}
(font-size: 0px; 은 그림으로 넣었을 경우에 해당)
이러면 FF 에서 공간이 사라짐을 볼 수 있다.
IE 에서도 두 속성을 주면 웬만한 공간은 없앨 수 있다.
그러나 IE 에서 계속 공간이 남아있을 경우,
다음은 이 방법을 쓰자.
2. <ul>과 <li>사이의 엔터를 없애라.
IE 에서는 (특히 IE6) HTML 주석태그도 읽을 뿐 아니라
엔터를 찍었던 부분까지(에디터에서 볼 수 있는 P 기호) 읽어들인다. 갓뎀.
그래서 공간이 뜨는 현상이 생기는거다.
탭메뉴 이외에도
이유 없이 IE 6 에서만 알수없는 공간이 생긴다 싶으면 십중팔구 이거다.
엔터 치지 말고 걍 줄~줄~ 쓰자.
<ul><li>
탭 메뉴 1</li><li>
탭 메뉴 2</li><li>
탭 메뉴 3</li></ul>
엔터 없이 소스를 써놓으면
나중에 알아보기도 힘드니까
이렇게 써주는 센스. -_-)=b
좀 웃기지만 이런 꼼수 써볼만 하다.
Posted by mkyoon
- Tag
- css, ie, 버그
- Response
- No Trackback , 2 Comments
Trackback URL : http://mkyoon.com/trackback/69
egotrip
