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

Question

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

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

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

Whosebug 使我 post 使用 jsfiddle link 的代码，所以这里是我们正在使用的样式：

* {
    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、3、5 内联渲染。
将浏览器缩小到 < 400 像素，因此正文背景为白色。观察项目 1-4 切换到 display:block.
再次调大浏览器，正文背景为黑色。观察项目 1、3、5 不再排队。

经过一番挖掘，我发现了这个 4 年多都没有修复的非常老的错误： https://bugs.webkit.org/show_bug.cgi?id=53166

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

干杯

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;

    }

}

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

Why don't elements display inline-block again after a resize down and up in Chrome?

html

css

google-chrome

responsive-design

media-queries