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

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. 【代码笔记】iOS-点击一个按钮会出现多个按钮的动画效果

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  2. 认识Activity,创建第一个android应用-Hello Word

    2016-04-05 配置好Java.eclipse和Android环境就花费了一天时间.下载SDK真是费了不少时间.现在终于找到解决SDK更新的好方法了(更新自己电脑上的hosts文件,就可以使用G ...

  3. ios git 终端提交

    git status    //检查提交状态 git status On branch master  //检查分支 git branch   //查看分支 git add *   //添加所有本地更 ...

  4. 学习Coding-iOS开源项目日志(一)

    前言:作为初级程序员,想要提高自己的水平,其中一个有效的学习方法就是学习别人好的项目.本篇开始会陆续更新本人对github上开源的一个很不错的项目的一点点学习积累.也就是,探究着别人写的源码,我学到了 ...

  5. 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法

    不知道有人做没做过对日外包,如果做过的话,那么对vb.net应该非常熟悉了,当年我刚毕业的时候也做过四个月的外包,那种日子简直 不是人过的,就连大楼下面买珠宝的阿姨都说,这些孩子,只看过他们上班,就没 ...

  6. MYSQL管理之主从同步管理

    原文地址:MYSQL管理之主从同步管理 作者:飞鸿无痕 MYSQL管理之主从同步管理 MYSQL主从同步架构是目前使用最多的数据库架构之一,尤其是负载比较大的网站,因此对于主从同步的管理也就显得非常重 ...

  7. Spring CharacterEncodingFilter

    <!-- 配置请求过滤器,编码格式设为UTF-8,避免中文乱码--> <filter> <filter-name>springUtf8Encoding</fi ...

  8. SHA-1 加密算法破解现已只需要 10 天

    转自:http://www.linuxeden.com/html/news/20151009/163173.html SHA-1是如今很常见的一种加密哈希算法,HTTPS传输和软件签名认证都很喜欢它, ...

  9. HTTP状态码206和416

    HTTP 2xx范围内的状态码表明了:"客户端发送的请求已经被服务器接受并且被成功处理了". TTP/1.1 200 OK是HTTP请求成功后的标准响应 HTTP/1.1 206状 ...

  10. Servlet/JSP-03 HttpServlet

    一. GenericServlet GenericServlet本身是一个抽象类,并且实现了Servlet和ServletConfig接口 其在内部定义了一个私有的ServletConfig类型的变量 ...