У меня странная проблема с HTML, CSS в разных браузерах: Firefox 3.6 и Webkit (Chrome & Safari).

Мой HTML выглядит так:

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

И мой CSS это ...

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

Таким образом, как вы можете догадаться, каждый якорь получает различную ширину в зависимости от его внутреннего текста. Например, первый элемент с текстом «ALL» будет больше (больше ширины), чем остальные.

Теперь проблема в том, что в Firefox (с использованием Firebug) я вижу, что вычисленная ширина для первого элемента составляет 26,5667 пикселей, в то время как в Chrome (с использованием инструментов разработчика Chrome) вычисленная ширина для того же элемента составляет ровно 27 пикселей.

Поэтому div.ln-буквы заканчиваются на разные ширины в каждом браузере, и это вызывает у меня некоторые проблемы.

Вопрос: есть ли обходной путь, чтобы избежать вычисления десятичных значений в Firefox? Или наоборот: заставить Chrome вычислять десятичные значения?

Заранее спасибо!