CSS div nowrap 在 IE 中不起作用答案

【问题标题】：CSS div nowrap not working in IECSS div nowrap 在 IE 中不起作用
【发布时间】：2013-02-05 20:52:33
【问题描述】：

我正在使用 iscroll js 库在 css 中构建流畅的导航。现在在 Firefox 和 chrome 中一切都很顺利。唯一的问题是 ie。

所以基本上我有一个流动的 div，我不想包装或打破它。在 ie 它打破了.. 我正在使用 white-space: nowrap css 属性。

仅兼容 ie8+。

html代码：

        <div id="nav">
            <ul class="navigation">
                .. many li tags with a tags inside ..
            </ul>
        </div>

CSS：

.navigation {
    display: inline-block;
    list-style: none;
    border-right: 1px solid #576a85;
    border-left: 1px solid #3e506c;
}

和

.navigation li {
    float: left;
}

.navigation a {
    display: block;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    border-left: 1px solid #576a85;
    border-right: 1px solid #3e506c;
}

行为的一些屏幕：

（镀铬）

（即）

感谢您的帮助！

【问题讨论】：

等一下——你想要一个响应式导航，但不希望它像在 IE 屏幕中那样“中断”，而 IE 屏幕对我来说看起来响应更快？
这就是我使用 iScroll 的原因。我可以水平滚动导航。
显示：内联块？？？只是给你一个提示：'inline-block'
我正在使用 inline-block.. 看看 .navigation 类 .. li 标签向左浮动
在具有小窗口尺寸的移动设备上，您可以放大大多数网站并在各个方向滚动。如果您不必放大即可访问导航，那就更好了。

标签： css html nowrap

【解决方案1】：

好的，我现在有问题了。

li 元素必须是 inline-block 而不是 float left 和 ul 空格 nowrap ...这样它会在 ie 中很好地呈现。

【讨论】：