Table of Contents
发现html5一个很奇怪的问题,div里面如果装着一个img,会被无故撑高几个像素,为什么?
Jun 07, 2016 am 08:42 AM
gt
html
lt
xhtml
这是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>
Copy after login
回复内容:
题主可以看一下这里html - html5 vertical spacing issue with几乎是题主问题的一种更详细问答。
我大概看了一下,挺有意思的。我简单翻译一下高票答案:
首先,浏览器并没有所谓的"HTML 5 模式",而是只有三种:怪异模式(Quirks),几乎标准的模式(Limited Quirks)和标准模式(Standards),其中几乎标准的模式和标准模式之间的唯一差异在于是否对我对题主如此细心的发现表示称赞,当然解决方式很简单,针对多出来的字母尾巴,设置行高或者字体大小为0,或者设置对齐基线垂直居中,至于display:block,一般我是不太推荐的,因为变成块元素又得占一行了……元素给定行高(line-height)和基线(baseline)。几乎标准模式中,如果
标签所在行没有其他的行内元素,将不指定基线(baseline),
标签因此会紧贴着父元素底部。
在标准模式中,行框总是会包含类似字母"g","f"尾巴下伸出来的那一部分空间(针对下行字母),即使行框内并没有任何内容。因此这种情况下你看到的跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。
使用 XHTML Transitional Doctype会是浏览器运行在”几乎标准模式(Limited Quirks)”。如果你使用XHTML Strict 或者HTML 4 Strict模式,你将看到和使用HTML 5 模式同样的间隙,因为这是标准模式(Standards mode)。
——————————add——————————
对我而言,搬砖过程中凡是涉及到行内元素(包括
图片父元素之间有间隙,是因为元素默认是基线(baseline)对齐的,即:
vertical-align: baseline;
Copy after login
img{
display:block;
} 泻药
基本上答差不多了都
我就不废话了
给个链接自己看
RD3020: 在不同的文档模式中,当唯一的非表单控件类行内替换元素存在于其包容块中时,其父框的行高并不一定会计算文本基线高度
闪 可以看下我之前的一个回答,问题类似:
为什么a标签中使用img后的高度多了几个像素? - 大地Dudy 的回答 下次遇到这种问题的话,开Devtool,人肉diff 一下computed style 有名的img图片5px问题,题主百度一下img 5px有很多说这里的解决方案。 很久以前也发现这个问题啦。
对于这种问题,我一般都是给父元素加一个font-size:0;
不过我现在已经不写代码啦/手动斜眼 我也遇到了这个问题,非常感谢大家的回答,作为回报,我提出一个很可能相同原理的bug。
我在svg中使用
还有的可能是浏览器默认的margin,padding不为0导致,设置为0 即可。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
3 weeks ago
By 王林
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot tools Tags

Hot Article
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
3 weeks ago
By 王林
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How do you parse and process HTML/XML in PHP?
