Chrome导航列表在CSS/HTML中定位媒体查询错误

这可能是一个Chrome/webkit渲染错误，但我想先检查一下我是否做错了什么

我有一个简单的UL/LI导航，每个LI都是水平显示的内联块。UL是文本对齐：右。 倒数第二个元素绝对位于页面右上角。最后一个元素的位置相对于将其向下推一点

对于移动设备（最大宽度为400px），有一个媒体查询，用于将元素重置为100px宽的标准自上而下堆叠列表

如果以宽屏幕宽度加载页面，则一切正常。如果在移动屏幕宽度中加载页面，则一切正常。但是，如果您从移动屏幕宽度开始，并扩展您的宽度，Chrome将以中断方式呈现列表元素：元素五将显示在下一行，即使在其他元素旁边有足够的空间容纳

HTML:

预期产出：

实际输出（调整窗口大小后）：

Firefox完全没有问题。这是Chrome 31。

---

简化的JSFIDLE测试用例：

尝试对您的li使用float:right：

li {
display: block;
padding: 5px;
background: blue;
float: right;
color: white;
min-width: 50px;
margin-right: 10px;
}

只需切换所有元素，使它们具有所需的顺序，并在调整大小后工作

下面是使用float的示例，现在只需重新排列菜单项

我在这里找到了一个解决方法：

解决方案是在LI中插入一个DIV，保持LI位置标准，但绝对定位DIV。通过这样做，Chrome在更改媒体查询时不会破坏元素

---

更新：发现了一个相关的Chrome bug，它以不同的方式演示了这个问题->

对我来说很有效，Chrome 32。那就意味着这是一个最近修补过的bug。@Joetje50你调整过窗口大小了吗？我正在运行Chrome32，我看到了所描述的一切。你是否尝试再次将滑块拖动到“小”和“大”以确认始终显示预期的输出？在Firefox和Chrome32中，它对我来说都是一样的：它在两个选项之间切换（顶部是宽的，底部是大的）。Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh。当然，它可以在初始页面加载时正常工作。但在媒体质询改变之后，它就破裂了。我将在Chrome中将此作为一个bug进行归档，但我愿意接受解决此问题的方法抱歉，我调整了相同的JSFIDLE，现在升级到了版本8。我想你的第6版被我改写了。无论如何，我找到了一个解决方案，以防止这种“铬回流”的问题。作为答复张贴

ul {
    background: lightblue;
    padding: 20px 0;
    text-align: right;
}

li {
    display: inline-block;
    padding: 5px;
    background: blue;
    color: white;
    min-width: 50px;
    margin-right: 10px;
}

li.abs {
    position: absolute;
    top: 0px;
    right: 0px;    
    z-index: 9;
}

.last {
    position: relative;
    top: 10px;
    margin: 8px;
}

@media (max-width: 400px) {
    ul li {
        display: block;
        width: 100px;
    }

    li.abs {
        position: static;   
    }

    .last {
        position: static;
        margin: 0;
    }
}

li {
display: block;
padding: 5px;
background: blue;
float: right;
color: white;
min-width: 50px;
margin-right: 10px;
}

li.abs div {
    position: absolute;
    top: 0px;
    right: 0px;    
    width: 60px;
    height: 25px;
    background: red;
    z-index: 9;
}