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

Question

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

这是我的代码:

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/

问题是出现了一个不必要的垂直滚动条，即使没有元素应该溢出。我熟悉导致元素之间出现空格的常规两行 block 相邻问题，但这似乎有点难以破解。

我想到的:

• 删除 HTML 中的所有空格
• overflow:hidden on #a - 有效，但不能用于我的网站(用户必须能够在需要时滚动内容)<
• font-size:0 on #a - 有效，但无法使用，因为我的网站使用 em 来调整大小#a 等元素。对我来说不是可行的解决方案。
• 使 #b 成为 block 状元素，或降低它的高度 - 可行，但对我的网站不可行。

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

Answer 1

可以通过将 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%;
}