ie6 ul list display inline-block扩展到全宽bug

时间:2013-07-24 07:24:09

标签: html css internet-explorer internet-explorer-6

这几天在一个项目上工作,在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="">&lt;</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="">&gt;</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;
}

错误的快照: bugs under ie6

1 个答案:

答案 0 :(得分:0)

仅在IE6和IE7上支持默认情况下显示inline的元素。

尝试:li{*display:inline;*zoom:1;}

Bonus url:http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/