티스토리 뷰

선언한 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 상에서 아주~ 잘 작동하였다.
댓글