Ich habe ein seltsames Problem beim Arbeiten mit HTML, CSS in verschiedenen Browsern: Firefox 3.6 und Webkit-Browser (Chrome & Safari).

Mein HTML sieht so aus:

<div class="ln-letters">
    <a href="#" class="all">ALL</a>
    <a href="#" class="a">A</a>
    <a href="#" class="b">B</a>
    <a href="#" class="c">C</a>
</div>

Und mein CSS ist ...

.ln-letters a { 
    font-family: 'Lucida Grande';
    font-size:14px;
    display:block;
    float:left;
    padding:0px 7px;
    border-left:1px solid silver;
    border-right:none;
    text-decoration:none;
}

So wie Sie sich vorstellen können, erhält jeder Anker abhängig von seinem inneren Text eine unterschiedliche Breite. Zum Beispiel ist das erste Element mit dem Text 'ALL' größer (breiter) als die anderen.

Jetzt ist das Problem, dass ich in Firefox (mit Firebug) feststellen kann, dass die berechnete Breite für das erste Element 26,5667 Pixel beträgt, während in Chrome (mit den Entwickler-Tools von Chrome) die berechnete Breite für dasselbe Element genau 27 Pixel beträgt.

Daher enden die div.ln-Buchstaben in jedem Browser mit unterschiedlicher Breite, was mir einige Probleme bereitet.

Frage ist: Gibt es eine Problemumgehung, um zu vermeiden, dass Firefox Dezimalwerte berechnet? Oder umgekehrt: Chrome zur Berechnung von Dezimalwerten zwingen?

Danke im Voraus