프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[표준코딩] ie6, ie7 display:inline-block 버그

2013.02.01
북마크 [출처 이동]    작성자 정보
위와 같이 보통 페이징 처리 시에 display:inline-block을 사용하면, ie6, ie7에서는 세로로 길게 나열된다.
그럴땐, {display:inline-block;zoom:1;*display:inline} 이렇게 써주면 된다.

<style>
.paging{width:100%;text-align:center}
.paging li{display:inline-block;zoom:1;*display:inline}
.paging li a{display:block;width:10px;height:10px;background:#fff;margin:0 2px;border:1px solid #999;line-height:999;overflow:hidden}
.paging li a:hover,
.paging li a.current{background:#99cc33;border:1px solid #003333}
</style>

<body>
<ul class="paging">
<li><a href="#" class="current">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</body>

이 포스트 공유하기

전체목록