嵌套div生成滚动条.为什么？

Question

我有3个嵌套的div:

<div class="outer">
  <div class="inner"><div class="item"></div></div>
</div>

.inner div是绝对位置,每个都有1px边框:

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
}
.item{
  width:100px;
  height:100%;
  background-color:yellow;
  display: inline-block;
  border:1px solid green;
  box-sizing:border-box;
}

这种安排导致.outer div上的滚动条.

这是一个codepen

为什么这是我需要改变什么来阻止它发生？

如果.inner div的边框宽度增加到3px,则滚动条会消失.再次,为什么会发生这种情况？

Answer 1

发生这种情况是因为您的.item元素设置为显示为inline-block. 这意味着它受到line-height和 等因素的影响vertical-align。

元素的默认垂直对齐方式inline-block是基线。这意味着它们被设置为出现在可能与其一起输入的任何文本的基线处。我不是 100% 确定，但我认为这里可能存在一个问题box-sizing，在进行此计算时会忽略该问题，并且基线最终会比应有的位置低 2 个像素（由于应用于边界的累积 2 个像素）元素的顶部和底部）。

如果您希望该元素继续以这种方式显示，一个快速解决方法是将其设置vertical-align为top：

.item {
    ...
    vertical-align: top;
}

Codepen 演示。