当图像在文本中时忽略行高

Question

我正在尝试在 div 中显示文本

<div style='line-height: 16px;'>$text</div>

在我将一些图像放入 $text 之前，16px 的行高是可以的（基本上我用 15px 高的笑脸图像替换了笑脸标志）。在这种情况下，行高变为 19px。 无论是否有图像，如何强制线条保持 16px 高度？ （边距、内边距、边框：每个元素为 0px）

这里的例子：

<style type="text/css">
div {
  color: black;
  font-family: Verdana;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: none;
  position: absolute;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;}

div.comment_text {
  left: 10px;
  right: 10px;
  line-height: 16px;
  overflow: auto;}
</style>

<div class='comment_text' style='top: 20px;'>
  the measured line height here 16px which is OK
  <br/><a href="mailto:myaddress@gmail.com" target='_blank'>myaddress@gmail.com</a>
  <br/><a href="http://www.facebook.com" target='_blank'>http://www.facebook.com</a>
  <br/>this
  <br/>lines
  <br/>are
  <br/>for
  <br/>example
  <br/>to
  <br/>demonstrate
  <br/>my
  <br/>problem
</div>    

<div class='comment_text' style='top: 300px;'>
  <img class='relative' style='top: 0px; max-height: 16px;' src='../images/smileys/tongue_out.png'/> the measured line-height here 17px which is wrong
  <br/>i'm a 15px high image: <img class='relative' style='top: 0px; max-height:16px;' src='../images/smileys/grinning.png'/>
  <br/>me too: <img class='relative' style='top: 0px; max-height: 16px;' src='../images/smileys/winking.png'/>
</div>

Answer 1

它不会忽略你的行高。

问题是您的内嵌图片比您的字体大。

行高是通过获取行高来计算的，如果它高于字体大小，则减去字体大小，然后将其分成两半以增加上下空间。

所以，你有：

(16px line-height) - (12px font-size) = 4px

这意味着每行文本将有 2px 上方和 2px 下方。

您遇到的问题是您在该行中添加了一个 15 像素的图像。 15px + 2px 上方 + 2px 下方 = 19px。所以这将把那条线推得更远。

解决方法是确保您的内联元素不高于您的字体大小。如果您仍然想使用更大的图标，那么您必须制作一个空的内联元素，并将溢出设置为可见，然后将您的图像放在其中。

示例：http://jsbin.com/yijuyepi/2/

Answer 2

尝试将max-height: 16px 设置为图像，以避免在它们较高时将它们分开。