您的位置: 首页  >  技术问答  >  带有显示的跨度元素:inline-flex的高度大于同级跨度

带有显示的跨度元素:inline-flex的高度大于同级跨度

分类: 技术问答 • 2022-04-19 10:47:37
问题描述：

在使用flex容器时，我注意到Chrome和Firefox都以比静态同胞大1px的高度来渲染它.

While playing with flex container I have noticed that both Chrome and Firefox render it with a height 1px greater than static siblings.

这是代码:

.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/

有人知道这是为什么以及如何避免吗?

Does anybody know why is this and how to avoid it?

答

默认情况下，您的 span 元素是内联级别的元素.

Your span elements are, by default, inline-level elements.

vertical-align的初始值 属性(适用于内联级元素)是 baseline .这样，浏览器就可以在元素下方提供一些空间，以容纳后缀.

The initial value of the vertical-align property, which applies to inline-level elements, is baseline. This allows browsers to provide a bit of space below elements to accommodate descenders.

在其中一个跨度上应用 display:inline-flex 时，您会建立

When you apply display: inline-flex to one of the spans you establish a flex formatting context. In this case, the children are blockified, meaning that the behavior is more like a block-level element.

因此， vertical-align 属性不再适用于span1，但仍继续适用于span2，这就是为什么您仍然看到下降空间的原因.

Hence, the vertical-align property no longer applies to span1, but it continues to apply to span2, which is why you still see the descender space.

根据规范(请参阅匿名框会包裹文字，并且是弹性项):

From the spec (referring to the anonymous box which wraps the text and is the flex item):

4.弹性项目

弹性项目的 display 值被阻塞:如果指定了生成flex的元素的流入子元素的 display 容器是一个内联级别的值，它计算到其块级别等效.

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属性.

The simplest solution is to make the parent a flex container, which keeps your child elements inline by default, and allows you to set flex properties on both.

.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>

修订过的小提琴

更多详细信息:

相关推荐