1

我试图使用“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示例。任何帮助，将不胜感激...

4

3 回答 3

1

因此，经过 3 个小时的深入挖掘，我终于找到了解决方案，这听起来很愚蠢，但字体“bauhaus 93”添加了额外的空间。它可以在除 IE 之外的所有浏览器上正确呈现（这令人震惊）。所以我不得不把它改成另一种字体，现在它工作得很好。所以如果有人遇到同样的问题，请检查您使用的字体。

于 2013-07-10T05:16:17.090 回答
0

玩你的线高。

试试这个 ：

#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 跨度

于 2013-07-10T02:34:31.913 回答
0

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

尝试

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

}
于 2013-07-10T04:13:59.227 回答