为啥在 Chrome 中调整大小后元素不再显示内联块？

Posted 2023-03-06

【中文标题】为啥在 Chrome 中调整大小后元素不再显示内联块？

【英文标题】：Why don't elements display inline-block again after a resize down and up in Chrome?为什么在 Chrome 中调整大小后元素不再显示内联块？

【发布时间】：2015-08-18 01:52:56

【问题描述】：

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

我只在 Chrome 中遇到了一个奇怪的错误，即元素 1、3、5 在缩小到小断点并再次放大后不会重新内联渲染。

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

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

*** 让我使用 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,3,5 内联渲染。 将浏览器大小调整为 再次调整浏览器大小，使正文背景为黑色。观察项目 1,3,5 没有再次排列。

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

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

干杯

【问题讨论】：

补充到我最后的想法，webkit 错误似乎已修复，因为他们的演示对我来说似乎已修复。

【参考方案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;