文本與非換連字符表中沒有對準

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

垂直對齊行事靠不住的。這應該解決它。

td { vertical-align: text-top; }

Answer 2

由於某種原因，該字符的垂直高度不同。如果你設置垂直對齊，它會幫助它看起來更好，但它不會改變你的內容的高度。這可能是字體的一個特點。

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; 
}