Html 带显示的跨度元素：内联弹性体的高度大于同级跨度

在使用flex容器时，我注意到Chrome和Firefox都以比静态容器高1倍的高度渲染它

代码如下：

.container{
背景颜色：黄色；
边框：1px纯红；
}
梅因先生{
边框：1px纯黑；
}
.flex cont{
显示：内联flex；
}

这是flex容器，高度为20px
这不是flex容器，高度为19px

似乎是一个

显示：内联问题，将其更改为
显示：内联块修复高度差。不知道这有多有用


正文{
利润率：30像素；
}	
.集装箱{
背景颜色：黄色；
边框：1px纯红；
}
梅因先生{
边框：1px纯黑；
显示：内联块；
}
.flex cont{
显示：内联flex；
}

这是flex容器，高度为20px
这不是flex容器，高度为20px
默认情况下，您的
span
元素是内联级元素

应用于内联级元素的属性的初始值为
baseline
。这允许浏览器在元素下面提供一点空间来容纳

当您将
display:inline flex
应用于您建立的跨距之一时。在本例中，子元素被块化，这意味着行为更像块级元素

因此，
vertical align
属性不再适用于span1，而是继续适用于span2，这就是为什么您仍然可以看到下行空间

从规范（参考包装文本且为弹性项的）：


弹性项的
显示
值被块化：如果指定
显示生成flex的元素的流入子元素的
容器是一个内联级别的值，它计算到其块级别
相当于

最简单的解决方案是将父元素设置为flex容器，默认情况下，子元素保持内联，并允许您在这两个容器上设置flex属性


.container{
显示器：flex；
背景颜色：黄色；
边框：1px纯红；
}
梅因先生{
边框：1px纯黑；
}

这是flex容器，高度为20px
这不是flex容器，高度为19px