html - IE 正在打破跨度(内联)到我的 div 中的另一个跨度

Question

我用 div 制作了一个列表，它在 Opera 中显示良好，但在 IE 中显示不佳。

这就是正在发生的事情，在第一个场景中，一些行的换行符，最后跨越 div - 包含类 shortcut: http://i.imgur.com/D5wZEdb.png

这些是 span 和 .shortcut 样式:

.ui-context-menu .row span{
        font-size:16px;
        font-family:'Segoe Ui',Arial,sans-serif;
        font-weight:400
}
.ui-context-menu .row .shortcut{
        float:right;
        margin-left:40px;
        margin-right:15px
}

在 row 类中，我做了:

.ui-context-menu .row{
        display:table;
        width:100%;
        height:25px;
        cursor:default;
        padding-right:18px
}

类 ui-context-menu 有点正常，但我添加了一个属性来 overflow hidden 。

HTML 可能会变成这样:

<div class="ui-context-menu" data-which="none" oncontextmenu="..." id="context-menu" style="display:none;left:8px;top:50px">
   <div class="row able" onmousedown="..." onclick="...">
      <div class="base">
         <div class="context">
            <span>
               Load
            </span>
            <span class="shortcut">
               CTRL+O
            </span>
         </div>
      </div>
   </div>
</div>

这是一个用于测试的快速 fiddle :http://jsfiddle.net/erpngfwv/2/

我该如何解决这个问题？

Answer 1

添加这个类 ".ui-context-menu .row span" float

.ui-context-menu .row span{ 
    float: left;
    font-family: "Segoe Ui",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
}