0

看看这个截图,我想你会明白我的问题:

截屏

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

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

4

2 回答 2

1

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

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

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

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

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

于 2013-08-01T16:41:45.200 回答
-1

为你的“Rini00”试试这个 CSS

<style type="text/css">
  #span-or-div-containing-rini {
    display: inline-block;
    vertical-align: top;
  }
</style>
于 2013-08-01T16:36:11.970 回答