Question

我试图使用“A”锚标签制作一个简单的帮助按钮。事情是它在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之外的所有浏览器上都能正确呈现（这令人震惊）。因此我不得不将其更改为另一种字体，现在它完美无缺。因此，如果有人遇到同样的问题，请检查您正在使用的字体。

Answer 2

玩你的行高。

试试这个：

#help-btn span { 
    color: #22002D;
    font: 10em "bauhaus 93";
    text-shadow: 0px 0px 5px #fff;
    line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE 

}

如果问题没有解决，请尝试添加display：block;到＃help-btn span

Answer 3

您需要添加line-height属性，该属性必须与div的高度匹配。在你的情况下：

尝试

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

}

在锚标记内垂直对齐文本不能在Internet Explorer中工作

3 个答案: