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

Question

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

Here's what I have so far .

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

请参阅此 fiddle :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 将不起作用。