我们在制作页面时,经常有可能碰到这样的设计:

li
 
图一
 
图一的布局代码如下:
 
<ul>
    <li><img src=”pic1.jpg” /></li>
    <li><img src=”pic2.jpg” /></li>
    <li><img src=”pic3.jpg” /></li>
    <li><img src=”pic4.jpg” /></li>
</ul>
 
由于图片的宽高尺寸不确定,所以不能固定其宽高属性,我们编写如下样式:
 
li {
 
    list-style: none;
 
    border: 1px solid #333;
 
    padding: 2px;
 
    float: left;
 
    margin-right: 14px;
 
}
 
结果除了 IE8 以外,在 IE6、IE7、Firefox 这三个浏览下显示效果都不正常,底下多出来了 4px,如图二所示:
 
图二
    图二
 
 
 
 解决办法有:
 
1. 为 li 内的 img  添加图片的垂直对齐方式为:顶部(或底部);
 
li img { vertical-align:  top; } 或 li img { vertical-align:  bottom; }
 
2. 设置 li 内的 img  显示为块;
 
li img { display: block; }
 
除此以外,还有其他的二种方法,如:给 ul 设置 font-size:0; 或者给 img 设置 margin-bottom: -4px; 也可以解决问题,但由于这二种 CSS 样式有可能会影响其它元素,故不推荐使用。

li标签包含img的问题的更多相关文章

  1. 用正则表达式抓取网页中的ul 和 li标签中最终的值!

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  2. 前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  3. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  4. html a标签包含a标签,浏览器的行为处理

    a标签包含a标签 浏览器可能是为了避免a的转跳重复,所以禁止了a标签包含a标签,如何你的代码中有a标签包含a标签,那么浏览器将会重新编码外层a标签,取外层a标签与内层a标签的差集,加上外层a标签,并把 ...

  5. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  7. ul+li标签制作表格

    table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...

  8. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  9. li标签之间的空隙问题(转)

    原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题   IE6/7的Bug:纵向排列的li中加 ...

随机推荐

  1. 折腾一天的WordPress

    自从昨天开始要写博客,在网上找了找大家都比较推崇著名的WordPress,所以自己就闲来无事要坐下测试弄一个,不弄不知道,一弄折磨人啊,公司的破网直接想让我崩溃,所以这一天就在这搭建环境中度过,不过值 ...

  2. Android - ADB 的使用

    一.什么是ADB? 1.ADB全称Android Debug Bridge, 是android sdk里的一个工具,用这个工具可以直接操作管理android模拟器或者真实的andriod设备 2.AD ...

  3. iOS 内存问题

    malloc: *** error for object 0x15f8a3558: incorrect checksum for freed object - object was probably ...

  4. PagerTabStrip在ViewPager的页面中添加标题显示

    package com.qf.day18_viewpager_demo_05; import java.util.ArrayList; import java.util.List; import an ...

  5. java重载和重写的区别

    一.重载(Overloading) (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态性的一种表现 ...

  6. 揣摩实现一个ioc容器需要做的事情

    思路: ioc框架的核心就是管理bean的生命周期,bean的生命周期包括:创建,使用,销毁. 创建 容器在创建一个bean的实例之前必须要解决以下问题:第一个问题: 创建bean的信息如何提供给你容 ...

  7. spring 和springMVC的区别

    springmvc只是spring其中的一部分.spring 可以 支持 hibernate ,ibatis ,JMS,JDBC 支持事务管理, 注解功能,表达式语言,测试springmvc 就是一个 ...

  8. sqlserver删除所有表(表结构和数据)

    要删除某个数据库,或者删除数据库中的所有表(删除表结构和数据),需要先删除表间的外键约束,才能删除表.如删除数据库db_wy中的所有表: --/第1步**********删除所有表的外键约束***** ...

  9. EventBus使用详解(一)

    一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...

  10. 初识Go

    意外关注到一位牛人的微信,提到了2014年他推荐的编程语言是Go.于是乎饶有兴趣的淘了一本书<Go语言程序设计>,学习起来. 第一章的练习题我的答案如下: // Copyright © 2 ...