Weird rounding-off bug in WebKit

I ran into this weird problem while I was writing the css for my personal website. There is a navigation bar in the page with 7 links inside a <div> sitting side-by-side:

I specified the width of the first six links to be 14% and the that of the last one 16% in the css. All the paddings, margins and borders were set to zero. So, they seven links should take up the entire width of the containing <div>, right?

Well, in webkit based browsers (I checked in Google Chrome for linux and Safari in Mac OS X leopard), that sometimes just would not happen: the total width of the seven links would fall short of the total width of the containing <div> by just a few pixels and there would be an annoying narrow strip showing the background color of the <div>.

More surprisingly, on resizing the browser window, sometimes the strip would go away and sometimes it would come back again. Firefox and opera didn't have any such problem rendering the page, though.

Now, I am no specialist in web designing. But still my common sense says that as long as 6*14+16 is 100, no such strip should be there. What the hell is going on?

Luckily, I found the answer while fiddling with the excellent Developer Tools of the Chrome browser. The widths computed by Chrome were:

Element	Computed width	Intended width
Container <div>	1013	-
First 6 <a>'s	141	1013*0.14=141.82
The last <a>	162	1013*0.16=162.08

Yes, webkit is taking the integer parts of the floats while computing the widths of the elements, instead of rounding off properly to the nearest integer. Therefore it's no wonder that for certain values of the width of the containing <div>, the sum of the widths of the child elements isn't adding up to the width of the parent.

I later found out that this bug has been reported in WebKit Bugzilla almost 5 years ago and hasn't been resolved yet. The bugzilla page doesn't even indicate that anybody ever tried to fix this crucial flaw capable of ruining the appearance of many webpages single-handedly.

Anyway, I wrote a few lines of javascript to make sure that the site renders correctly in chrome and safari and it's working just fine. It's really annoying though, being forced to use javascript to compensate for a rendering engine's shortcoming in this era of standards-compliant browsers. I shudder to imagine what I would encounter when I finally test the site in IE.