Trying to create a consistent ?-mark-inside-circle in CSS

Question

I'm trying to create a question-mark-inside-a-circle glyph using CSS. It should look like © basically.

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;
}

It's not bad on firefox but the positioning of the question mark inside the circle is off-centre on Chrome (and I don't have IE to test but I'm assuming the worst).

I don't understand much about the nuances of fonts. Can this approach be made to work cross-platform or should I give up and use an image? I'm doing it this way to keep it scaled with the font.

UPDATE: Tweaking the settings as suggested so far is providing improvements only in select circumstances. There always seems to be some font sizes for which there is more than a rounding error (more than 1 pixel that is) of off-centreness either horizontally or vertically. The goal is to fit the border to the question mark, not fit the border to the square box which contains the question mark, as I suspect is happening.

Answer 1

Looks like you're missing line-height:1; Add that and it gets significantly better.

Personally I think it looks best with font-size:50%, but that's my opinion.

Updated Fiddle