zoukankan      html  css  js  c++  java
  • IE6下img多余5像素空白

    代码

    <ul>
    <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
    </ul>

    ul{
     280px;
    }
    ul li{
    display:block;
    height:57px;
    277px;
    }

     

      其中 temp.jpg 尺寸为 277×57
    Firefox 下的正常表现:
     
    IE6 下的非正常表现:
     

    很明显地可以看到 IE 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。
    解决方法 一使 li 浮动,并设置 img 为块级元素

    ul{
     280px;
    }
    ul li{
    float:left;
    display:block;
    height:57px;
    277px;
    }
    img{
    display: block;
    }

    解决方法 二设置 ul 的 font-size:0; (我喜欢这个)

    ul{
         280px;
        font
    -size: 0;
    }
    ul li{
        display:block;
        height:57px;
        277px;
    }

    解决方法 三设置 img 的 vertical-align: bottom

    ul{
         280px;
        font
    -size: 0;
    }
    ul li{
        display:block;
        height:57px;
        277px;
    }
    img{
        vertical
    -align:bottom;
    }

    解决方法 四设置 img 的 margin-bottom: -5px;

    ul{
         280px;
        font-size: 0;
    }
    ul li{
        display:block;
        height:57px;
        277px;
    }
    img{
        margin-bottom: -5px;
    }

    具体参见:无序列表ul在IE6、IE7中下边距bug

  • 相关阅读:
    队列与双向队列

    linux nohup, jobs, fg, tail指令 指令前后台切换
    linux shell
    Linux学习笔记四 grep, sed, awk
    面试要求
    jenkins send files or publish
    mysql导入脚本
    第三方接口调用框架
    pdm文件name与comment互相同步
  • 原文地址:https://www.cnblogs.com/NetSos/p/1781224.html
Copyright © 2011-2022 走看看