html - 为什么为两个内联 block 兄弟 div 之一设置行高会影响两个 div？

Question

我有以下内容:

<div>
    <div style="display:inline-block; ">div_1</div>
    <div style="display:inline-block; line-height:20px;">div_2</div>
</div>

为什么为第二个 div 设置 line-height 属性也会影响第一个 div？以及如何纠正这个问题我只需要第二个 div 受 line-height 的影响，因为我需要为第一个 div 指定不同的 line-height。 提前致谢。

document.getElementById('go').onclick = function(e) {
  document.getElementById('div_2').style.lineHeight = '30px';
};

<button id="go">Go</button>
<div>
  <div style="display:inline-block;" id="div_1">div_1</div>
  <div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>

Answer 1

有了测试用例，现在一切都变得一清二楚了。

将 vertical-align: top 添加到第一个 div:

<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>

固定版本:http://jsfiddle.net/my6Su/5/

阅读本文以了解 display: inline-block 和 vertical-align 之间的关系: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

对于视觉演示也很有用:
http://www.brunildo.org/test/inline-block.html