zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    JZOJ 5870 地图
    20190921
    20190919
    SP703 SERVICE
    UVA323 Jury Compromise
    [note]一类位运算求最值问题
    [BZOJ3674]可持久化并查集
    [luogu3359]改造异或树
    [luogu4755]Beautiful Pair
    [BJWC2012]冻结
  • 原文地址:https://www.cnblogs.com/SmartJs/p/3186438.html
Copyright © 2011-2022 走看看