看看这个截图,我想你会明白我的问题:
只有在同一行中有图像(如这个笑脸)时才会发生这种情况。出现在粗体、斜体和下划线文本中。图像上没有特殊格式。
有谁知道可能导致这种情况的原因?
光看图片,我的猜测是图片的高度比实际的笑脸要大,导致父容器变大,导致文字不对齐。我看到两个解决方案:
调整图像的高度,使其与您使用的字体高度匹配,并确保图像标签没有任何额外的边距或填充。或者:
调整每个聊天行的父容器中所有文本的垂直对齐方式。
我认为第二个选项可能更合适,因为它会保持所有内容对齐,即使字体大小发生变化(无论是设计决策、浏览器渲染还是使用自定义样式表的用户)。但是,如果单个消息的文本跨越多行,或者在使用表情符号时可能会出现较大的行间距,您可能需要同时执行这两种操作。
如果父容器是 aTR
或者TD
您可能只需将vertical-align
属性设置middle
为并没问题。否则,您需要按照 Guillaume 的建议更改它的显示类型,或者使用 atable
来显示聊天内容(这可能会或可能不会更可取,具体取决于您对在非表格数据的标记中使用表格的感觉) .
为你的“Rini00”试试这个 CSS
<style type="text/css">
#span-or-div-containing-rini {
display: inline-block;
vertical-align: top;
}
</style>