html - パーセンテージで設定した場合の幅の差は 1px

Question

サイズ変更可能なjQueryに使用している水平のテーブルのようなリストがあります。問題は、各 li の幅が fe 6% で均等に設定されていることですが、ブラウザは「cells」のピクセル幅を +-1px の差でレンダリングします。これはデータ表示の問題ではありませんが、固定されたステップで ul に沿って要素のサイズを変更するときに、1 つの親密な場所で問題になります。では、ブラウザにすべての li-s を等しくさせるにはどうすればよいでしょうか? (実際には、table タグ、table-layout: fixed および colgroup を使用して実行しましたが、残念ながら table はすべてのレイアウト要件に適合しません)。

HTML:

<ul class="month-ul">
    <li class="emp-li">Name</li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
    <li class="data-li"></li>
</ul>

CSS:

ul {
    list-style-type: none;
    text-align: left;
    padding: 0;
    font-size: 0;
    width: 100%;
}

li {
    padding: 0;
    font-size: 12px;
}

.data-li, .emp-li{
    display: inline-block;
}

.emp-li {
    width: 16%;
}

.data-li {
    width: 7%;
}

JsFiddle の例: http://jsfiddle.net/XVRBF/