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。

jsフィドル

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