具有相同高度的两个div以不同方式显示

Question

我在容器中有两个div，它们都设置为display:inline-block，高度相同。两者之间的唯一区别是它们的字体大小。因为它们的高度被设置为相同的值，我希望它们是相同的高度并且从页面的顶部开始，但是不是这种情况（一个是从顶部偏移的一点点。。

为什么会出现这种情况，如何使它们的高度相同且从顶部偏移0？

http://jsfiddle.net/tinanyaa/tWrHd/1/

Answer 1

inline-block的默认值是基线。在DIV中定义vertical-align:top。写得像这样：

div{
 display:inline-block;
 vertical-align:top
}

选中此http://jsfiddle.net/tWrHd/2/

阅读此内容以获取更多Why is this inline-block element pushed downward?

Answer 2

或许将vertical-align: text-top;或vertical-align: top;属性添加到这两个属性可能有帮助吗？