html - ie6 ul list display inline-block expend to full width bug -
working on project these days, run weird problem under ie6, (ie7 , other ok)
li element under ul using display:inline-block expend full width. can check img uploaded below.
i using zoom:1 *display:inline trigger display:inline-block lte ie8, works fine under ie7, ie6 has problem above.
here code
<div class="mp-pagnation"> <ul class="mp-pagnation-list clearfix"> <li><a href=""><</a></li> <li><a href="">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="">...</a></li> <li><a href="">654</a></li> <li><a href="">></a></li> </ul> </div> .mp-pagnation{ width:300px; height:28px; background:#fff; margin:0 auto; *margin-top:20px; padding:4px 0 0 0; text-align: center; } .mp-pagnation-list{ height:24px; } .mp-pagnation-list li{ display:inline-block; *display:inline; zoom:1; } .mp-pagnation-list li a{ display: block; height:24px; padding:0px 4px; text-decoration: none; color:#00baff; margin:0px 5px; font-size:16px; } .mp-pagnation-list li a:hover,.mp-pagnation li a.current{ color:#fff; background:#00baff; }
the snapshot of bug:
only supported in ie6 , ie7 on elements display of inline
default.
try: li{*display:inline;*zoom:1;}
bonus url: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
Comments
Post a Comment