a标签中使用img后的高度多了几个像素
解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
作者:大地Dudy
链接:http://www.zhihu.com/question/26821863/answer/65552730
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
img标签有时候会出现下方无缘无故多出像素的BUG
解决方法1:
设置 img 的 vertical-align: bottom;
ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ vertical-align:bottom; }
- 2
解决方法2:
设置 img 的 margin-bottom: -5px;
ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ margin-bottom: -5px; }
- 3
解决方法3
设置 ul 的 font-size:0;
ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; }
- 4
解决方法4
使li浮动,并设置img为块级元素
ul{ width: 280px; } ul li{ float:left; display:block; height:57px; width:277px; } img{ display: block; }
a标签中使用img后的高度多了几个像素的更多相关文章
- 为什么a标签中使用img后的高度多了几个像素?
a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其 ...
- a标签中使用img后的高度多了4px
前两天,在做一个网站的时候,发现a标签中使用img后的高度多了4px,各种纠结. 最后,仔细分析,终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下 ...
- 为什么a标签中使用img后,高度多了几个像素?
<li><a href="#"><img src="images/audio.jpg" alt="">& ...
- 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...
- HTML 的超链接 a 标签中如何设置其宽度和高度?
HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...
- HTML Meta标签中的viewport属性含义及设置
两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...
- IE 下a标签在 position:absolute 后无法点击的问题
IE 下 a 标签在 position:absolute 后无法点击的问题 条件 : DOCTYPE 为 XHTML. IE 浏览器 现象 : 将 a 的 position 指定为 absolute, ...
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- 前端 -----02 body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
随机推荐
- CentOS7 下安装telnet服务
今天搞了下 Centos 7 下面升级 openssl 和 openssh ,顺便装了下 telnet # 安装 telnet 避免 ssh 无法登录 yum -y install xinetd te ...
- Java错误提示is not an enclosing class
今天脑袋晕乎乎的,犯了个低级错误,好半天才反应过来 一直提示:is not an enclosing class 我居然把 RegisterActivity.class 写成了 RegisterAct ...
- 【转】http://www.cnblogs.com/yuzukwok/p/3884377.html
来自:http://www.cnblogs.com/yuzukwok/p/3884377.html An Introduction to Xamarin.Forms 来源:http://develop ...
- 3天CSS总结
css的重点和难点是盒子模型中的margin.padding.border.属性,还有浮动也是重点.
- 使用android的mediaplayer做成 一个demo,欢迎测试使用
附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...
- 重新注册.netframework4.0
IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...
- CVE-2014-1767 利用分析(2015.2)
CVE-2014-1767利用分析 参考这篇文章利用思路,重现利用,主要说明自己在实现的时候遇到的坑. 利用思路 1. 第一次 IoControl,释放 MDL,我们通过 VirtualAddress ...
- java中的异常处理机制
java异常处理机制 1)在java语言中,通常将可能出现异常的语句放入try{}语句中,将出现错误后需要执行的语句放入到catch{}语句中,将无论是否发生异常都要执行的语句放在finally{}语 ...
- ® 不需要显示为商标符的做法
若url中有参数reg,则把® 变为 ®
- linux的用户,群组和其他用户
1 linux 安全模型:(多任务,多用户的操作系统) 1)使用user和group控制使用者对文件的存储权限. 2)用户使用账户和口令登录linux 3)每个文件都有owner(创建者),owner ...