html - 如果前一个元素包含图像，则行内块元素移动到底部

Question

但是，当我用文本替换 img 标签时 - 元素的位置与预期的一样（彼此相邻，高度相同）。

发生在所有浏览器上。

如何解决？

float: left不是一种选择

HTML：

<div id='main'>
    <div id='first'>
      <img src='https://www.google.ru/images/icons/product/chrome-48.png' height='30'>
    </div>
    <div id='second'>Text</div>
</div>

CSS：

div {
    border: 1px solid gray;
    height: 30px;
}
#first {
    display: inline-block;
    height: 30px;
}
#second {
    display: inline-block;
    height: 30px;
}

score 3 · Accepted Answer

添加vertical-align: top做它没有float。

jsFiddle

#first {
    display: inline-block;
    height: 30px;
    vertical-align: top;
}
#second {
    display: inline-block;
    height: 30px;
    vertical-align: top;
}