带有非断开连字符的文本未在表格中对齐

Question

奇怪的是：在HTML表格单元格中的字符串中添加不可断开的连字符时，文本与其他单元格不对齐：

<table><tr><td>aligned</td><td>aligned-with normal hyphen</td></tr><tr><td>aligned</td><td>un&#8209;aligned with non breakable hyphen (&#8209;)</td></tr></table>

Here is a JSFiddle for this

对此有何解释/解决方法？

Answer 1

由于某种原因，该角色的垂直高度不同。如果您设置垂直对齐，它将有助于它看起来更好，但它不会改变您的内容的高度。它可能是字体的特殊性。

https://jsfiddle.net/1yz4mngh/14/

<强> HTML

<table>
    <tr><td>-</td></tr>
    <tr><td>&#8209;</td></tr>
</table>

<强>的CSS

td {
    background: #cccccc;
    vertical-align: text-bottom;
}

Answer 2

垂直对齐表现得很糟糕。这应该解决它。

td { vertical-align: text-top; }