html - 为什么元素在 Chrome 中上下调整大小后不再显示内联 block ？

Question

我正在尝试证明线框可以响应式工作，其中列表项 1-4 在移动设备上显示: block ，在桌面上 1、3、5 彼此相邻显示。

我只在 Chrome 中遇到过一个奇怪的错误，元素 1、3、5 在调整大小到小断点并再次向上调整后不会重新内联呈现。

演示: http://jsfiddle.net/n0ocqf2w/3/

全屏: https://jsfiddle.net/n0ocqf2w/3/embedded/result/

stackoverflow 让我用 jsfiddle 链接发布代码，所以这里是我们使用的样式:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
ul {
    margin: 50px 0 0 0;
    padding: 0;
    font-size: 0;
    white-space: nowrap;
}
li {
    display: block;
    margin: 0;
    padding: 10px 50px;
    height: 40px;
    background: red;
    font-size: 12px;
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
}
li:nth-child(1) {
    background: red;
}
li:nth-child(2) {
    background: pink;
}
li:nth-child(3) {
    background: blue;
}
li:nth-child(4) {
    background: lightBlue;
}
li:nth-child(5) {
    background: green;
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
}

@media screen and (min-width:400px) {
    body {
        background: black;
    }
    ul {
        margin: 0;
    }
    li {
        display: inline-block;
        width: 20%;
        vertical-align: top;
    }
    li:nth-child(2) {
        background: pink;
        position: fixed;
        top: 35px;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: .5;
    }

    li:nth-child(4) {
        background: lightBlue;
        position: fixed;
        top: 45px;
        left: 20px;
        width: 100%;
        z-index: 1;
        opacity: .5;
    }
    li:nth-child(5) {
        background: green;
        position: relative;
        width: 20%;
    }
}

在 Chrome 中复制的步骤:

1. 在宽断点处打开，因此正文背景为黑色。观察元素 1、3、5 内联渲染。
2. 将浏览器缩小到 < 400 像素，因此正文背景为白色。观察元素 1-4 切换到 display:block。
3. 再次调整浏览器大小，使正文背景为黑色。观察元素 1、3、5 不再排列。

经过一番挖掘，我发现了这个非常古老的错误，该错误已超过 4 年未修复: https://bugs.webkit.org/show_bug.cgi?id=53166

有人可以确认这是否可以修复吗？我真的希望上面链接中的开放错误不存在于此处，但是在调整大小后不在媒体查询中应用显示属性的标准完全匹配:-(

干杯

Answer 1

希望这对您有所帮助。 http://jsbin.com/bakujusaxu/1/edit?css,output

/*
  SOLUTION HERE

  The following elements are being treated as a "clearfix" type of thing, so when you re-size from "mobile" to "desktop" the fixed position elements are being treated as "block", as they happen to be intersected elements, it gives the stacked result... 
*/

@media screen and (min-width:400px) {
    li:nth-child(2),
    li:nth-child(4) {
      /*
      The bug is a re-drawing bug. Not your fault, but the browser's.
      The ideal solution, would be to set this to inline, but that doesn't work.
      So you can set it to the following values:
      none
      flex
      table
      list-item
      */
      display: flex;

    }

}