奇怪的 chrome 媒体查询行为答案

【问题标题】：Strange chrome media queries behaviour奇怪的 chrome 媒体查询行为
【发布时间】：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;
}

【讨论】：