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

Posted by jävi on Stack Overflow See other posts from Stack Overflow or by jävi
Published on 2010-04-03T11:01:22Z Indexed on 2010/04/03 11:23 UTC
Read the original article Hit count: 527

Filed under:
|
|

Hello one more time!

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!

© Stack Overflow or respective owner

Related posts about css

Related posts about firefox