html – 带显示的Span元素：inline-flex的高度大于兄弟跨度

概述在使用flex容器时,我注意到Chrome和Firefox的渲染高度比静态兄弟高1px. 这是代码： .container { background-color: yellow; border: 1px solid red;}.main { border: 1px solid black;}.flex-cont { display: inline-flex;} <div 在使用flex容器时,我注意到Chrome和firefox的渲染高度比静态兄弟高1px.

这是代码：

.container {  background-color: yellow;  border: 1px solID red;}.main {  border: 1px solID black;}.flex-cont {  display: inline-flex;}

<div >  <span >    		This is the flex container,height is 20px    	</span>  <span >    		This is not the flex container,height is 19px    	</span></div>

小提琴：http://jsfiddle.net/pzoxfs90/

有谁知道这是为什么以及如何避免它？

解决方法 默认情况下,span元素是内联级元素.

适用于内联级元素的vertical-align属性的初始值是基线.这允许浏览器在元素下方提供一些空间以容纳descenders.

当您将display：inline-flex应用于其中一个跨距时,您将建立一个flex formatting context.在这种情况下,子级被阻塞,这意味着该行为更像是一个块级元素.

因此,vertical-align属性不再适用于span1,但它继续应用于span2,这就是您仍然可以看到下降空间的原因.

从规范(指的是包装文本的anonymous box并且是flex项目)：

07004

The display value of a flex item is blockifIEd: if the specifIEd
display of an in-flow child of an element generating a flex
container is an inline-level value,it computes to its block-level
equivalent.

最简单的解决方案是使父项成为一个Flex容器,默认情况下保持子元素内联,并允许您在两者上设置flex属性.

.container {    display: flex;    background-color: yellow;    border: 1px solID red;}.main {    border: 1px solID black;}

<div >    <span >This is the flex container,height is 20px</span>    <span >This is not the flex container,height is 19px</span></div>

Revised Fiddle

更多细节：

> Why is there a vertical scroll bar if parent and child have the same height?
> In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?

总结

以上是内存溢出为你收集整理的html – 带显示的Span元素：inline-flex的高度大于兄弟跨度全部内容，希望文章能够帮你解决html – 带显示的Span元素：inline-flex的高度大于兄弟跨度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。