为什么子 div 会导致垂直滚动条与绝对父级一起显示？

Question

我有 box div，它通过绝对定位占据所有空间。 在盒子里面，还有另一个 div 应该占据相同位置的高度/宽度 100%。

不知何故，在 IE11 上，垂直滚动条出现了。 （Chrome、Firefox 不显示滚动条）

我相信滚动条出现是因为有些东西溢出了，但我不知道为什么。

box div 的溢出必须设置为自动，因此如果有任何溢出，它应该显示垂直滚动条，但在小提琴示例中，据我所知，不应该有任何溢出。 有什么想法吗？

http://jsfiddle.net/30w11ph2/8/

HTML：

<div class='box'>
    <div class='view'></div>
</div>

CSS：

.box
{
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}

.view
{
    height: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

Answer 1

行内块元素参与行内格式化上下文。这意味着存在行框，并且行内框在其中垂直对齐。

可以使用vertical-align 设置垂直对齐方式，最初为baseline。这会导致usually unwanted space underneath。可以将vertical-align 设置为top、bottom、middle、...

在这种情况下，我的猜测是 IE 不喜欢 vertical-align: top，因此它不能解决元素下方的空间问题。因此，100% + space > 100%，所以有溢出。

但你可以解决它

.view {
  vertical-align: middle;
}

.box {
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}
.view {
    height: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class='box'>
  <div class='view'></div>
</div>

或者，您可以使用块代替内联块：

.view {
  display: block;
}

.box {
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}
.view {
    height: 100%;
    width: 100%;
    display: block;
}

<div class='box'>
  <div class='view'></div>
</div>