Computed width with decimal values in Firefox, but without decimals in Webkit

Question

I have a strange problem working with HTML,CSS in different browsers: Firefox 3.6 and Webkit browsers (Chrome & Safari).

My HTML looks like this:

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

And my CSS is...

.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 as you can guess, each anchor gets a different width depending on its inner text. For example the first element with the text 'ALL' will be bigger (more width) than the others.

Now the problem is that in Firefox (using Firebug) I can see that the computed width for the first element is 26.5667px, while in Chrome (using Chrome's developer tools) the computed width for the same element is exactly 27px.

Therefore the div.ln-letters ends with different widths in each browser and that is causing me some troubles.

Question is: there is any workaround to avoid Firefox computing decimal values? Or the opposite: to force Chrome to compute decimal values?

Thank you in advance!

Answer 1

I think the answer to the bolded question is "no", and it's not clear to me what problem you're really trying to solve. You can't expect all browsers on all platforms to display your page exactly the same (e.g. because different platforms may use different fonts to render your page). If you want the div to have a fixed width, set it explicitly in CSS.

Some related links on the fractional pixels mess:

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• DOM element width can be non-integer?