替换元素导致 IE6 中的行高设置失效

在 IE6 中，如果给某个元素设置了行高，而该元素内又有一个替换元素（input、img 或设置为 inline-block 的元素），则会导致其行高设置无效，该元素的高度将塌缩，其高度与内部的替换元素相同（在只有一行时）。

另外在 IE6，IE7 及 IE8 中，如果替换元素的高度大于其父元素的行高，则该替换元素所在行的 baseline 将降低。

这个问题在网上有很多人说到，但其所提供的解决方案是「为每个替换元素计算并设置外边距，以使其顶开父元素」。该方式虽然有效，但还不够简单和通用，因此不是很好。下面提供另一种解决方案，供各位选用。

这种方式足够简单「在替换元素的旁边添加一个空的 inline-block 元素即可」：

<div class="line-height: 50px;">
    <img src="images/ex.jpg" width="20" height="20" />
    <span style="display: inline-block; *zoom: 1; *display: inline;"></span>
    content text
</div>