在使用flex容器时,我发现Chrome和Firefox渲染的高度比静态兄弟元素多1像素。
以下是代码:
.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/
有人知道这是为什么吗?如何避免这种情况?