關於inline-block在IE8下無效的解決方法

qingyezhu發表於2014-10-28
inlineBloC
    <style>
        .divClass{
            width:500px;
            border:1px solid #ccc;
        }
        /*IE8下可以不用加（*zoom:1;*display:inline;需要新增在display後面）*/
        .divClass span{
            display:inline-block;
            width:160px;
            margin-left:20px;
            *zoom:1;
            *display:inline;
        }
        
        .ulClass{
            width:500px;
            border:1px solid #ccc;
            margin-top:20px;
        }
        /*IE8下需要新增（*zoom:1;*display:inline;需要新增在display後面）*/
        .ulClass li{
            display:inline-block;
            width:160px;
            *zoom:1;
            *display:inline;
        }
    </style>

<div class="divClass">
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
            <span>測試span</span>
        </div>
        <ul class="ulClass">
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
            <li>測試li</li>
        </ul>

最終效果圖：

相關文章