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

Question

这可能是Chrome / webkit呈现错误，但我想先检查一下我是否做错了。

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

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

如果您以宽屏幕宽度加载页面，一切都很好。如果您在移动屏幕宽度中加载页面，一切都很好。但是如果你从移动屏幕宽度开始，并扩展你的宽度，Chrome将以一种破碎的方式呈现列表元素 ：元素五将出现在下一行，甚至虽然有足够的空间放在其他元素旁边。

HTML：

<ul>
    <li>li One</li>
    <li>li Two</li>
    <li>li Three</li>
    <li class="abs">li Four</li>
    <li class="last">li Five</li><!-- This element should always appear to the right of "Three" in the wide screen width -->
</ul>

CSS：

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;
    }
}

预期产出：

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

Firefox完全没有问题。这是Chrome 31。 简化的JSFiddle测试用例：http://jsfiddle.net/ZE3Kk/4/

Answer 1

尝试使用float：对你的li来说：

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

只需切换所有元素，这样他们就可以获得所需的顺序，并且在调整大小后可以正常工作

这是浮动的示例，现在只需重新排列菜单项http://jsfiddle.net/ZE3Kk/6/

Answer 2

我在这里找到了一个解决方法： http://jsfiddle.net/ZE3Kk/8/

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

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

更新：找到一个相关的Chromium错误，以不同的方式演示此问题 - ＆gt; https://code.google.com/p/chromium/issues/detail?id=147449