首頁 >web前端 >H5教程 >发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?

发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?

WBOY
WBOY原創
2016-06-07 08:42:151806瀏覽

这是html4的DOCTYPE

<span class="cp">
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><div> <span class="na">style=</span><span class="s">"background:black;float:left"</span><span class="nt">><img  alt="发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?" > <span class="na">src=</span><span class="s">"http://photocdn.sohu.com/20110902/Img318184717.jpg"</span> <span class="nt">/></span></span>
</div></span>
<span class="nt"></span>
<span class="nt"></span> 
</span>

回复内容:

题主可以看一下这里html - html5 vertical spacing issue with 发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?
几乎是题主问题的一种更详细问答。
我大概看了一下,挺有意思的。我简单翻译一下高票答案:
首先,浏览器并没有所谓的"HTML 5 模式",而是只有三种:怪异模式(Quirks),几乎标准的模式(Limited Quirks)和标准模式(Standards),其中几乎标准的模式和标准模式之间的唯一差异在于是否对发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?元素给定行高(line-height)和基线(baseline)。几乎标准模式中,如果发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?标签所在行没有其他的行内元素,将不指定基线(baseline),发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?标签因此会紧贴着父元素底部。

在标准模式中,行框总是会包含类似字母"g","f"尾巴下伸出来的那一部分空间(针对下行字母),即使行框内并没有任何内容。因此这种情况下你看到的发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。
使用 XHTML Transitional Doctype会是浏览器运行在”几乎标准模式(Limited Quirks)”。如果你使用XHTML Strict 或者HTML 4 Strict模式,你将看到和使用HTML 5 模式同样的间隙,因为这是标准模式(Standards mode)。
我对题主如此细心的发现表示称赞,当然解决方式很简单,针对多出来的字母尾巴,设置行高或者字体大小为0,或者设置对齐基线垂直居中,至于display:block,一般我是不太推荐的,因为变成块元素又得占一行了……
——————————add——————————
对我而言,搬砖过程中凡是涉及到行内元素(包括发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?标签),为了保证不同标签的垂直对齐和题主这种问题,都会考虑是否加上合适的vertical-align,一般取值为middle 图片与父元素下边缘有 2px 的间隙,并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。
图片父元素之间有间隙,是因为元素默认是基线(baseline)对齐的,即:
<code class="language-text">vertical-align: baseline;
</code>
css样式里添加
img{
display:block;
} 泻药
基本上答差不多了都
我就不废话了
给个链接自己看
RD3020: 在不同的文档模式中,当唯一的非表单控件类行内替换元素存在于其包容块中时,其父框的行高并不一定会计算文本基线高度
闪 可以看下我之前的一个回答,问题类似:
为什么a标签中使用img后的高度多了几个像素? - 大地Dudy 的回答 下次遇到这种问题的话,开Devtool,人肉diff 一下computed style 有名的img图片5px问题,题主百度一下img 5px有很多说这里的解决方案。 很久以前也发现这个问题啦。
对于这种问题,我一般都是给父元素加一个font-size:0;
不过我现在已经不写代码啦/手动斜眼 我也遇到了这个问题,非常感谢大家的回答,作为回报,我提出一个很可能相同原理的bug。
我在svg中使用标签安排中文时,发现中文的实际位置会比给定的参数下沉大约2像素,所以我不得不把y参数上调2像素。想来和本问题真真是一样的。 浏览器默认的line-height不为0, 如果div中有空格的话有些浏览器会自动撑高,把div的line-height设置为0就行了;
还有的可能是浏览器默认的margin,padding不为0导致,设置为0 即可。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn