Question

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

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

16px线高可以，直到我将一些图像放入$ text（基本上我用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

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

Answer 2

它不会忽略你的行高。

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

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

所以，你有：

（16px行高） - （12px font-size）= 4px

这意味着每行文本将高于2px，低于2px。

您遇到的问题是您已在该行中添加了15px图像。 15px + 2px以上+ 2px以下= 19px。所以这将推动一条线进一步分开。

修复方法是确保您的内联元素不高于您的字体大小。如果您仍想使用较大的图标，则必须将溢出设置为可见的空内联元素设置为可见，然后将图像置于其中。

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

图像在文本中时忽略行高

2 个答案: