css - 包含 div 未完全扩展为包含具有百分比的子项

Question

我有一个 div 可以扩展以适合其子 div，但是当我给子填充或边距以百分比指定时，父级似乎没有考虑该空间。但是，如果我使用像素指定填充或边距，它可以正常工作，这看起来很奇怪。我一直在寻找解决方案，但无济于事。我已经在 Firefox 和 Chrome 中尝试过，这是我必须支持的唯一浏览器。
http://jsfiddle.net/YTsmz/5/

带像素：

百分比：

的HTML：

<div class="field">
    <div class="name">countries</div>
    <div class="value">united states</div>
    <div class="value">united kingdom</div>
    <div class="value">dominican republic</div>
</div>

的CSS：

.field {
    position: relative;
    float: left;
    border-right: 1px dotted #3d3d3d;
    line-height: 1em;
    white-space: nowrap;
    padding: 0 1% 0 1%;
    font-weight:bold;
}
.field .name {
    font-size:1em;
    line-height:1.5em;
}
.field .value {
    display: inline-block;
    margin: 0% 1% 0% 0%;
    border-right: 1px dotted #3d3d3d;
    padding: 0 1% 0 1%;
    font-size:1.3em;
    line-height:1.3em;
}
.field .value:last-of-type {
    border-right: none;
}