zoukankan      html  css  js  c++  java
  • 解决IE下的li中img多余4px的问题--IE6有的问题

    为了对比明显,这里用img标签占位,但是背景用纯黑色

    <ul>
        <li>
    	<img src="" alt="" /></li>
        <li>
    	<img src="" alt="" /></li>
        <li>
    	<img src="" alt="" /></li>
        <li>
    	<img src="" alt="" /></li>
    </ul>
    
    // css样式
    ul {
    	 280px;
    	margin: 0;
    	padding: 0;
    }
    ul li {
    	list-style: none;
    	height:80px;
    	150px;
    }
    img {
    	 50px;
    	height: 80px;
            background: black;
    }
    

    明显的有4px的间距

    解决办法:

    1. 使 li 浮动,并设置 img 为块级元素

    2. 设置 ul 的 font-size:0;

    3. 设置 img 的 vertical-align:“top,text-top,bottom,text-bottom”。【对所有浏览器有效果】

    4. 设置 img 的 margin-bottom: -4px;这个对chrome有效 但是有的论坛说直接给img加hack img{*margin-bottom:-4px;} 但是这个hack在chrome下,不会被解析。

    最佳的设置是-- 3.设置垂直对齐

    以上都是经过浏览器测试的

  • 相关阅读:
    Javascript笔记部分
    JQuery学习笔记(3)
    WPF中批量进行验证操作
    学习sqlserver的函数方法
    .NET学习笔记(2)
    Asp.Net页面生命周期
    ThreadLocal
    NIO内存映射
    CAS基础和原子类
    Java锁概念基础
  • 原文地址:https://www.cnblogs.com/xiaqilin/p/6930846.html
Copyright © 2011-2022 走看看