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

【问题标题】：Chrome navigation list positioning bug with media queries in CSS/HTMLChrome 导航列表定位错误与 CSS/HTML 中的媒体查询
【发布时间】：2014-02-20 09:46:13
【问题描述】：

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

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

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

如果您以宽屏宽度加载页面，一切都很好。如果您以手机屏幕宽度加载页面，一切都很好。但是如果你从手机屏幕宽度开始，并扩展你的宽度，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/

【问题讨论】：

适用于我，Chrome 32。那意味着它是最近修补的错误。
@Joeytje50 您是否调整了窗口大小？我正在运行 Chrome32，我看到了所描述的所有内容。
您是否尝试再次将滑块拖动到小和大以确认始终显示预期的输出？
在 Firefox 和 Chrome 32 中它对我来说都是一样的：它在 i.imgur.com/ZbLeUjZ.png 之间切换（顶部是宽的，底部是调整大小的）。 Ohhhhhhh 等等，我现在看到了，没关系它的工作：x
问题是某些东西导致 Chrome（也是 v.32）在媒体查询更改后无法正确“重排”元素。当然，它在初始页面加载时运行良好。但是在媒体查询更改后它会中断。我会将其作为 Chrome 中的错误提交，但我愿意接受解决此问题的方法

标签： html css

【解决方案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/

【讨论】：

抱歉，我正在调整相同的 JSFiddle，现在我升级到了版本 8。我认为您的第 6 版已被我覆盖。无论如何，我找到了一个解决方案来防止这个“Chrome reflow”问题。发布为答案

【解决方案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 错误，它以不同的方式演示了这个问题 -> https://code.google.com/p/chromium/issues/detail?id=147449

【讨论】：