inline-block 出现不必要的滚动条

Unnecessary scrollbars appear for inline-block

在编写网站代码时,我偶然发现了一些奇怪的东西。

这是我的代码:

HTML

<div id='a'><div id='b'></div></div>

CSS

html{height:100%}
body
{
    margin: 0;
    height: 100%;
    background: green;
    padding: 0 5%;
}
#a
{
    height: 100%;
    background: blue;
    text-align: center;
}
#b
{
    display: inline-block;
    height: 100%;
    background: red;
    width: 50%;
}

还有一个 JSFiddle,以防万一:http://jsfiddle.net/ud3y1vh2/

问题是出现了一个不必要的垂直滚动条,尽管 none 的元素应该会溢出。我熟悉导致元素之间出现空白的常规两行块相邻问题,但这似乎有点难以破解。

我想到的:

因此,如果您能想出任何关于如何删除滚动条的想法(或者更确切地说,删除滚动条的 原因),我想听听他们的意见。

可以通过将 inline-block 元素的 vertical-align 属性 更改为 top 等值来删除滚动条。 default vertical-align value is baseline,这就是元素对齐到底部的原因(导致滚动条)..

Updated Example

#b {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    background: red;
    width: 50%;
}