带有nowrap和溢出的内联div隐藏

Question

我的顶部栏中有多个div。它在Chrome中按预期工作，但在Firefox中，.third div在第二行中被包围。如何让Firefox中的.third div让nowrap像Chrome一样？

http://jsfiddle.net/qhoc/C6f4c/

以下是条件：

1. .top始终拥有width:100%，因此它涵盖了整个浏览器窗口
2. 每个内部divs（第一，第二，第三......）都有自己的预定义固定宽度
3. 他们必须留在一排。如果浏览宽度不够，右边的那些将被溢出隐藏（不包裹到第二行）。
4. 喜欢用css处理这个问题。 jQuery应该是最后的手段。

帮助很感激!!

Answer 1

删除浮动：从内部div中向左添加一个添加显示：inline-block。这些div将充当内联元素，但具有相同的块属性。

http://jsfiddle.net/C6f4c/2/

.top {
  width: 100%; /* this is optional to accomplish your first condition, either you don't need to have inline-block on this element */

}
.top div {
    position: relative;
    /*float: left;*/
    height: 100%;
    display: inline-block;
}

Answer 2

您是否尝试过使用媒体查询？一旦浏览器达到某个最大宽度等，您就可以隐藏div。

更多信息：

http://css-tricks.com/css-media-queries/