css - CSS粗体文本下标与图像在同一行

Question

看看这个截图，我想你会明白我的问题：

只有在同一行中有图像（如这个笑脸）时才会发生这种情况。出现在粗体、斜体和下划线文本中。图像上没有特殊格式。

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

Answer 1

光看图片，我的猜测是图片的高度比实际的笑脸要大，导致父容器变大，导致文字不对齐。我看到两个解决方案：

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

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

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

如果父容器是 aTR或者TD您可能只需将vertical-align属性设置middle为并没问题。否则，您需要按照 Guillaume 的建议更改它的显示类型，或者使用 atable来显示聊天内容（这可能会或可能不会更可取，具体取决于您对在非表格数据的标记中使用表格的感觉） .

Answer 2

为你的“Rini00”试试这个 CSS

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