css - IE溢出：隐藏生成新行

Question

在第一张图片上有 Chrome 渲染在右边有 IE。

<div class="row">
    <div class="field">
        Mapname:
    </div>
    <div class="value" style="width: 102px;">
        Russia
    </div>
</div>
<div class="row">
    <div class="field">
        Gamemode:
    </div>
    <div class="value"  style="width: 98px;">
        Samp-Rp.Ru Russia
    </div>
</div>

如您所见，Internet Explorer 并没有截断多余的文本，而是将 div.value 框放在 div.field 下方。

这是我的CSS：

div.field{
    float: left;
}

div.value{
    float: right;
    height: 20px;
    line-height: 20px;
    text-align: right;
    overflow: hidden;
}

div.row{
    min-height: 20px;
    line-height: 20px;
    clear: both;
}

Answer 1

IE 的世界是一个谜和痛苦，但是官方MSDN来源建议使用

-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar