这几天在一个项目上工作,在ie6下遇到一个奇怪的问题,(ie7和其他都没问题)
在ul下使用display的li元素:inline-block将扩展到全宽。你可以查看我在下面上传的img。
我正在使用缩放:1 *显示:内联触发显示:lte IE8的内联块,在IE7下工作正常,但IE6有上述问题。
这是代码
<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;
}
错误的快照:
答案 0 :(得分:0)
仅在IE6和IE7上支持默认情况下显示inline
的元素。
尝试:li{*display:inline;*zoom:1;}
Bonus url:http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/