为什么元素在Chrome调整大小后不再显示内联块？
为什么元素在Chrome调整大小后不再显示内联块？
提问于 2015-06-03 17:44:08
我试图证明一个线框可以响应地工作，这样列表项目1-4显示:块在移动，在桌面上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,3,5在线渲染。
- 将浏览器的大小调整到<400 so，因此身体背景是白色的。观察项目1-4切换到显示:阻止。
- 重新调整浏览器的大小，所以身体背景是黑色的。观察第1,3,5项不再排队。
经过一番挖掘，我发现了一个已经4年多没有修复过的非常老的bug：bug.cgi?id=53166
有人能确认一下这个是否可以修复吗？我真的希望上面链接中打开的bug在这里不存在，但是在调整大小后不应用媒体查询中显示属性的标准正好匹配:-(
干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-03 18:52:01
希望这能有所帮助。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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30627131
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号