티스토리 뷰

웹프로그래밍/css

IE에서 li img float: left 들을 table-row 모양으로 clear:left 하는법 (IE Hack)

공허공자 2008. 9. 16. 17:56
선언한 DocType 은
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

에서 prototype & scriptaclous 중 autocomplete 기능을 구현하다가

<ul>
    <li><span><img style='float:left' /></span>xxxxxxx</li>
    <li><span><img style='float:left' /></span>xxxxxxx</li>
    <li><span><img style='float:left' /></span>xxxxxxx</li>
</ul>

를 table-row 모양으로 보여주려고

<li style='clear:left'><span><img style='float:left' /></span>xxxxxxx</li>

해봤는데 FireFox 에서는 잘 되었으나 IE 7.0 에서는 먹히지 않았다.


골때리는 이 문제로 구글링을 할 수 밖에 없었으며 결국 아래의 페이지를 찾아 해결봤다.
http://www.greywyvern.com/code/min-height-hack
중간에 보면 Important 란 굵직한 제목으로 내가 원하는 예제가 확실히 적혀 있었다.

<li style="height:1%;"><span class="informal"><img style="float:left" /></span>xxxxxxx<div style="clear:both; height:1px; overflow:hidden;"></div></li>

했더니 IE/FF 상에서 아주~ 잘 작동하였다.

'웹프로그래밍 > css' 카테고리의 다른 글

CSS Hack 없이 Cross-Browser 가능한 같은 높이의 열 레이아웃 구현  (0) 2009.03.26
CSS 관련 링크모음  (0) 2009.03.25
테이블 열(table tr row) 에 마우스 올림 효과(hover)  (0) 2009.03.09
Layout CSS (Grid & Column)  (0) 2008.09.11
CSS 만으로 구현하는 드롭다운 메뉴  (0) 2008.09.10
공유하기 링크
댓글