javascript - 跨度垂直对齐

Question

我在跨度顶部垂直对齐文本时遇到问题。

vertical-align: top; text-top 等...不起作用，它是 display: inline-block 的跨度。

请查看代码和输出快照。

输出看起来更像是居中对齐而不是顶部对齐。

如果有人能提供帮助，那就太好了。

<span id="myspan" contenteditable="true" style="font-size:30px;" 
                                                        class="textImage" >
     This is text inside the span
</span>
<button id="mybutton" type="button">Increase Font</button>

CSS:

  .textImage
{
    border: solid 4px #000000;
    min-height: 20px;
    min-width: 240px;
    display: inline-block;
    font-family: Arial;
    color: red;
    vertical-align: text-top;
}​

Javascript:

$("#mybutton").click(function(event) {
    document.getElementById("myspan").style.fontSize = 
                  (parseInt(document.getElementById("myspan").style.fontSize, 10)
                                                    + parseInt(4, 10)) + 'px';
});​

Answer 1

大多数字体占用的每个字符的高度都比字符 T 明显占用的高度高。如果您选择一些文本，您将能够清楚地看到这一点。选择的高度应该让您了解所用字体中每个字符的实际高度。如果选择突出显示被视为触及跨度的内部顶部，则意味着文本确实是顶部对齐的。如果您注意到所选内容的顶部和跨度的内部顶部之间有任何间隙，您应该能够通过删除任何给该跨度的 padding-top 来纠正它。