Chrome is preventing my table from taking a full 100% width when the parent width isn't an even number

Question

Here is my problem: JSFiddle

I have a table within a div , the div is 50% wide. The table should fill 100% of the width of the div .

<div>
   <table>
       <tr>
           <td>Resize and see Pixel to the right -></td>
       </tr>
   </table>
</div>

The CSS:

div {
   width: 50%;
   background: red;
}
table {
   width: 100%;
   background: rgb(255,255,255);
}

It basically works, but when you resize the browser, you sometimes can see the background of the div . It's because the div 's width won't be rounded, but the table 's width will.

For example: If the div is 315.5px wide (because of the 50% width), the table only inherits a width of 315px for its width. The browser then rounds up the div to 316px and causes the div to be 1px wider than the table. This bug only occurs to me in Chrome .

How can I fix this?

Answer 1

This is an issue I've had with other design setups, it's hard to over come, and I haven't solved it yet. What is happening is how Mac and PC render the font are roughly 1px+ different.

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Update:

Given the conversation bellow I put together a JS file to resize the div when needed. I can't replicate the issue so I don't know if it'll work, but here it is. I'm curious to try this when I get home on my Mac and see the error.

function fixDiv() {
    var myDiv = document.getElementById("myDiv");
    var currentWidth = myDiv.offsetWidth;

    if (currentWidth % 2 != 0) {
        var newWidth = parseInt(currentWidth) + 1;
        myDiv.setAttribute("style", "width: " + newWidth + "px");
    }
}

window.onresize = function (event) {
    fixDiv();
}

fixDiv();