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

Question

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

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

在我将一些图像放入 $text 之前，16 像素的行高是可以的(基本上我用 15 像素高的笑脸图像替换了笑脸符号)。在这种情况下，行高变为 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 行高) - (12px 字体大小) = 4px

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

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

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

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