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

2023年6月28日 268次阅读

在使用flex容器时,我注意到Chrome和Firefox的渲染高度比静态兄弟高1px.

这是代码：

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

<div class="container">
  <span class="main flex-cont">
    		This is the flex container, height is 20px
    	</span>
  <span class="main">
    		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 class="container">
    <span class="main">This is the flex container, height is 20px</span>
    <span class="main">This is not the flex container, height is 19px</span>
</div>

Revised Fiddle