【问题标题】:ie6 ul list display inline-block expend to full width bugie6 ul 列表显示内联块扩展到全宽错误
【发布时间】:2013-07-23 13:19:26
【问题描述】:

这几天在做项目,在ie6下遇到一个奇怪的问题,(ie7等都ok)

ul 下使用 display:inline-block 的 Li 元素将扩展为全宽。你可以在下面查看我上传的img。

我使用zoom:1 *display:inline 来触发lte IE8的display:inline-block,在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;
}

错误快照:

【问题讨论】:

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


    【解决方案1】:

    仅在 IE6 和 IE7 中支持默认显示为 inline 的元素。

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

    奖励网址:http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

    【讨论】:

      猜你喜欢
      • 2010-09-07
      • 2018-06-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-24
      • 2014-03-10
      相关资源
      最近更新 更多