尝试在CSS中创建一致的？-mark-inside-circle

Question

我正在尝试使用CSS创建一个问号 - 圆圈内的字形.它应该看起来像©基本上.

这是我到目前为止所拥有的.

a::before
{
    content: '?';
    font-size: 60%;
    font-family: sans-serif;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 1.8ex;
    height: 1.8ex;
    border-radius: 1ex;
    color: blue;
    background: white;
    border: thin solid blue;
}

它在firefox上并不坏,但是圆圈内问号的位置在Chrome上偏离中心(我没有IE测试,但我假设最差).

我对字体的细微差别了解不多.这种方法可以跨平台工作,还是应该放弃并使用图像？我这样做是为了让它与字体一起缩放.

更新:到目前为止,根据建议调整设置仅在特定情况下提供改进.似乎总是存在一些字体大小,其水平或垂直方向的偏离中心不仅有舍入误差(超过1个像素).目标是使边框适合问号,不适合包含问号的方框边框,因为我怀疑正在发生.

Answer 1

看到这个小提琴:http://jsfiddle.net/hg7nP/7/

仅突出显示我更改的内容:

.infolink:before {
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px;
    text-decoration: none;
}

关于跨浏览器,它适用于除IE <9之外的所有浏览器,但border-radius不起作用.

Answer 2

根据 Abhitalk 的答案并进行了一些尝试，我想出了一种响应式方法，其中问号和圆圈都按基本字体大小的比例缩放，因此您可以轻松设置整个事物的大小:

.infolink:after {
    content: '?';
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 0.8em;
    line-height: 0.8em;
    border-radius: 50%;
    margin-left: 6px;
    padding: 0.13em 0.2em 0.09em 0.2em;
    color: inherit;
    border: 1px solid;
    text-decoration: none;
}

像这样使用它：

<div class="infolink" style="font-size: 20px"></div>

如果您看到如何进一步改进，非常欢迎您的评论！

Answer 3

只需使行高与元素/伪元素的高度相同即可。

line-height:1.8ex;