html - 垂直对齐 anchor 标记内的文本在 Internet Explorer 中不起作用

Question

我试图使用“A” anchor 标记制作一个简单的帮助按钮。问题是它在 Firefox、Chrome、OP、Safari 上完美运行。现在，当我在 Internet Explorer 10 上尝试时，文本在中间没有正确对齐。这是我到目前为止所做的:

HTML

<a id="help-btn"><span>?</span></a>

CSS

#help-btn {
    display: table;
    margin-left: auto;
    margin-right: auto;
    border: solid 5px #2F2F2F;

    width: 10em;
    height: 10em;
    text-align:center;

    background: #c100ff; 
    text-decoration: none;
    vertical-align: middle;
}

#help-btn span { 
    color: #22002D;
    font: 10em "bauhaus 93";
    text-shadow: 0px 0px 5px #fff;
    line-height: 100%;

}

这是一个jsfiddle样本。任何帮助将不胜感激...

Answer 1

所以经过 3 小时的深入挖掘，我终于找到了解决方案，听起来可能很愚蠢，但字体“bauhaus 93”添加了额外的空间。它在除 IE 之外的所有浏览器上都能正确呈现(令人震惊)。所以我不得不将其更改为另一种字体，现在它可以完美运行了。因此，如果有人遇到同样的问题，请检查您使用的字体。