width: calc(100% / 3);

那么就举个例子说我的屏幕是782px宽：

782 / 3 = 260.66̅

但是我遇到的问题是在Internet Explorer中,它将像素舍入到两位小数(260.67)

260.67 * 3 = 782.01

因此,在某些宽度下,我丢失了1/3的页面,因为它包裹在下面.

这是一个example：

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,163,1)),color-stop(0.5,rgba(210,230,56,color-stop(0.51,rgba(195,216,37,to(rgba(219,67,1)));
    background: -webkit-linear-gradient(rgba(230,1) 0%,1) 50%,1) 51%,rgba(219,1) 100%);
    background: -moz-linear-gradient(rgba(230,1) 100%);
    background: -o-linear-gradient(rgba(230,1) 100%);
    background: linear-gradient(rgba(230,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>

有谁知道解决这个问题的优雅方法？

我知道我可以使用宽度：33.33％,但是我内心的一小部分会发出嘶嘶声,知道它并非100％爆炸.