CSS粗体文本用同一行中的图像下标

Question

看看这个截图，我想你会遇到我的问题：

只有在同一行中有图像（如笑脸）时才会发生这种情况。发生粗体，斜体和强调文字。 图像上没有特殊格式。

有没有人知道可能导致这种情况的原因？

Answer 1

仅仅通过查看图像，我的猜测是图像的高度大于实际的笑脸，这使得父容器变大并导致文本不对齐。我看到两个解决方案：

1. 调整图像的高度，使其与您使用的字体高度相匹配，并确保图像标记没有任何额外的边距或填充。或者：

2. 调整每个聊天行的父容器中所有文本的垂直对齐方式。

我认为第二个选项可能更合适，因为即使字体大小发生变化（是设计决策，浏览器渲染还是使用自定义样式表的用户，它也会保持一致性） ）。但是，如果文本跨越单个消息的多行，则可能需要同时执行这两种操作，或者在使用表情符号时可能会出现大的行间距。

如果父容器是TR或TD，您可以将vertical-align属性设置为middle并且没问题。否则，你需要像Guillaume建议的那样更改它的显示类型，或使用table显示聊天内容（可能会或可能不会更好，这取决于你在标记中使用表格的感觉非表格数据的特写）。

Answer 2

尝试使用此CSS作为“Rini00”

<style type="text/css">
  #span-or-div-containing-rini {
    display: inline-block;
    vertical-align: top;
  }
</style>