奇怪的 chrome 媒体查询行为

Posted 2023-03-06

【中文标题】奇怪的 chrome 媒体查询行为

【英文标题】：Strange chrome media queries behaviour

【发布时间】：2015-04-13 13:51:28

【问题描述】：

我的布局在 500 像素处中断，使用浮动和内联块来移动元素。但是 chrome(40) 在从小到大拆分后无法正确渲染它们。

这是最初的移动布局

调整大小时的预期布局

结果不正确

包含编辑/删除按钮的 div 显示为内联块并向右浮动，但不沿“标签”堆叠。

div.link-div div.edit-delete 
    display: inline-block;
    float: right;
    background-color: #3498db;

完整的 CSS JSFiddle.

我的断点在移动旋转之间，因此浏览器将调整大小。这适用于 FF、IE。 CSS有什么问题吗？请提供一些解决方法。

【问题讨论】：

有趣的是，如果您在 >500px 宽的视口中加载页面，它的布局与预期一样。调整大小以达到断点，然后再次放大，会触发错误。

@Palpatim 是的。在上面的代码中，您只需在放大时遇到断点时刷新。但是我的代码中已经存在一个糟糕的解决方法。如果您查看 div.content 中的日期跨度，它会呈现得很好:)。这与我对编辑/控制按钮所做的完全相反。

【参考方案1】：

嗯，解决问题的一种方法是添加“float:left;”到锚标签，以确保它不会发生。您可以将它们包装在 div 和“浮动”中，div 与“编辑删除”div相对。

这是您编辑的JSFiddle。我为 div 创建了一个名为“tags-div”的类，它在 MediaQuery 上设置为“float:left;”在大于 500 像素的屏幕上。

@media screen and (min-width: 501px) 
.tags-div 
    float: left;

【讨论】：

是的，虽然有一些额外的标记，但效果也很好。你知道我的代码中出现错误行为的原因吗，因为它适用于 FF、IE？