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> ...
随机推荐
- layer ifram 弹出框
父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button ...
- drag
1.draggable ="true" 元素可以拖拽了 2.拖拽元素事件: dragstart 拖拽前触发 drag 拖拽前.拖拽结束之间,连续触发 dragend 拖拽结束触 ...
- [UWP小白日记-5]转换MVA学院的XML字幕为SRT
开源地址:第二版开源地址GIT 暂时用不了了,在最新的WIN10 10586.494系统上回闪退,正在酝酿第二版 O(∩_∩)O哈哈~ 新版已经完工:第二版 地方MVA上好多教程,但是微软的所有中国网 ...
- 【Python】Markov text generator马尔科夫文字生成器
遍历一段文字,统计每个字后面出现的字和其次数,当前一个字确定的时候,计算后一个字出现的百分比,用这个百分比作为文字生成器中后一个字出现的概率进行文字生成 from random import rand ...
- cocos2d安装配置及打包成Android
vs+python+cocos2d python下载:点这里 这里需要下载Python 2.X版本.曾经以为要下载3.x版本 后来装上发现cocos2d-x提供的python运行报错,所以卸载以后重新 ...
- delphi const
参考:http://www.cnblogs.com/tibetwolf/articles/1785744.html 1.const修饰可能会优化编译代码.关于这一点与编译器密切相关,由于变量被cons ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- 在MVC里使用 HttpContext.Response输出内容
public ActionResult About() { byte[] ss = System.Text.Encoding.UTF8.GetBytes("111122"); Ht ...
- LWP::UserAgent介绍1
require LWP::UserAgent; my $ua = LWP::UserAgent->new; ); $ua->env_proxy; my $response = $ua-&g ...
- 关于java web开发需要哪些技术要求(简单的web界面管理系统)
目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Ja ...