Question

在使用弹性容器时，我注意到Chrome和Firefox的渲染高度都比静态兄弟高1px。

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

在这里小提琴：http://jsfiddle.net/pzoxfs90/

有人知道为什么会这样，以及如何避免它？

Answer 1

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

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

当您将display: inline-flex应用于其中一个范围时，您会建立flex formatting context。在这种情况下，子项被阻塞，这意味着行为更像是块级元素。

因此，vertical-align属性不再适用于span1，但它继续应用于span2，这就是为什么你仍然会看到下降空间。

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

4. Flex Items

Flex项的display值被阻止：如果指定的话   display生成flex的元素的in-flow子节点   container是一个内联级别的值，它计算到它的块级别   等效。

最简单的解决方案是使父级成为弹性容器，默认情况下会使子元素保持内联，并允许您在两者上设置弹性属性。

.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

更多详情：

Answer 2

似乎是display:inline;问题，将其更改为display:inline-block;可修复高度差异。不确定这是多么有用......

body {
  margin: 30px;
}	

.container {
  background-color: yellow;
  border: 1px solid red;
}

.main {
  border: 1px solid black;
  display:inline-block;    
}

.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 20px
	</span>
</div>

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

2 个答案: