IE6/IE7下,li设置float后,行高变高问题__UL的padding-top Bug

问题描述:li设置float属性后,IE6/IE7下行高变高

分析解决:在IE6/IE7下,由于设置了ul的padding-top属性。导致浮动后的li行高变高。

代码示例:

<style>
    ul{ width:500px; padding-top:50px;}
    li{ width:250px; height:100px; float:left;}
</style>
<ul>
    <li><img src='images/demo/listImg.png'></li>
    <li><img src='images/demo/listImg.png'></li>
    <li><img src='images/demo/listImg.png'></li>
    <li><img src='images/demo/listImg.png'></li>
</ul>

以上代码会导致出现li的高度变高,并非设置的100px;

解决办法:出现这种情况,解决办法有很多种,以下是一种解决示例

<style>
    div{padding-top:50px;}
    ul{ width:500px;}
    li{ width:250px; height:100px; float:left;}
</style>
<div>
    <ul>
        <li><img src='images/demo/listImg.png'></li>
        <li><img src='images/demo/listImg.png'></li>
        <li><img src='images/demo/listImg.png'></li>
        <li><img src='images/demo/listImg.png'></li>
    </ul>
</div>

 

posted @   SmartJs  阅读(708)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示