Versuchen, einen konsistenten? -Mark-Inside-Circle in CSS zu erstellen

Question

Ich versuche, ein Fragezeichen-im-Inneren-Kreis-Zeichen mit CSS zu erstellen. Es sollte grundsätzlich wie © aussehen.

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

Es ist nicht schlecht auf Firefox, aber die Positionierung der Fragezeichen innerhalb des Kreises ist nicht in der Mitte auf Chrome (und ich habe nicht IE zu testen, aber ich gehe davon aus das Schlimmste).

Ich verstehe nicht viel über die Nuancen von Schriftarten. Kann dieser Ansatz plattformübergreifend funktionieren oder sollte ich aufgeben und ein Bild verwenden? Ich mache es so, um es mit der Schrift skaliert zu halten.

AKTUALISIEREN: Durch das Anpassen der Einstellungen, wie bisher vorgeschlagen, werden nur unter bestimmten Umständen Verbesserungen erzielt. Es scheint immer einige Schriftgrößen zu geben, bei denen es mehr als einen Rundungsfehler (mehr als 1 Pixel) von Off-Centreness gibt, entweder horizontal oder vertikal. Das Ziel ist es, den Rand an das Fragezeichen anzupassen, den Rand nicht an die quadratische Box anzupassen, die das Fragezeichen enthält, wie ich vermute, geschieht.

Answer 1

Einfach die Höhe der Linie gleich der Höhe des Elements/Pseudo-Elements.

line-height:1.8ex; 

Answer 2

Sieht aus wie Sie fehlt line-height:1; dass hinzufügen und es wird deutlich besser.

Ich persönlich denke, es sieht am besten mit font-size:50%, aber das ist meine Meinung.

Updated Fiddle

Answer 3

Sehen Sie diese Geige: http://jsfiddle.net/hg7nP/7/

Hervorhebungen nur die Dinge, die ich geändert:

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

In Bezug auf Cross-Browser, wird in allen Browsern außer IE arbeiten < 9 wo border-radius ‚gewonnen t arbeiten.