Tengo un diseño de 3 columnas que debería llenar toda la pantalla, así que en mis columnas que estoy usando:

width: calc(100% / 3);

Digamos, por ejemplo, que mi pantalla tiene 782 píxeles de ancho:

782/3 = 260,66̅

Sin embargo, el problema que tengo es en Internet Explorer, donde redondea los píxeles a dos decimales (260.67)

260,67 * 3 = 782,01

Entonces, en ciertos anchos, pierdo 1/3 de mi página a medida que se ajusta debajo.

Aquí hay unejemplo:

function onResize() {
    $('ul').each(function() {
        var H = eval($(this).height() / $(this).children('li').length);
        $(this).children('li').outerHeight(H);
        $(this).children('li').css('line-height', H + 'px');
        $(this).children('li').outerWidth($(this).width());
    });
}

var timer;
$(window).resize( function() {
    timer && clearTimeout(timer);
    timer = setTimeout(onResize, 100);
});
onResize();

html {
    height:100%;
}
body {
    background:black;
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}
ul {
    width: calc(100% / 3);
    display: inline-block;
    overflow:hidden;
    margin:0;
    padding:0;
    float:left;
    height:100%;
    list-style: outside none none;
}
ul li {
    background: rgb(230,240,163);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(230,240,163,1)), color-stop(0.5, rgba(210,230,56,1)), color-stop(0.51, rgba(195,216,37,1)), to(rgba(219,240,67,1)));
    background: -webkit-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -moz-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul1">
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul id="ul2">
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul id="ul3">
    <li>Test 5</li>
    <li>Test 6</li>
</ul>

¿Alguien sabe de una forma elegante de resolver este problema?

Sé que yopodría utilizarwidth: 33.33%, sin embargo, hay una pequeña parte de mí dentro que llora sabiendo que no es 100% explosivo.