css - IE 溢出 : hidden generates a new line

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: 自动 |无 |滚动条 | -ms-autohiding-scrollbar