奇怪的chrome媒体查询行为

Question

我的布局在使用浮点数和内联块转换元素时以500px分解。但是铬（40）在从较小尺寸到较大尺寸的断裂后不能正确地渲染它们。

这是最初的移动布局

调整大小时的预期布局

结果不正确

包含编辑/删除按钮的div显示为内联块并向右浮动，但不会沿着＆＃39;标记堆叠。

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

完整的CSS JSFiddle。

我的断点是在移动轮播之间，因此浏览器会调整大小。这适用于FF，IE。 CSS中出了什么问题？请给出一些解决方法。

Answer 1

嗯，解决问题的方法是添加一个＆＃34; float：left;＆＃34;到锚标签，以确保它不会发生。您可以将它们包装在 div 中，然后浮动＆＃39;浮动＆＃39;那个 div 与＃34; edit-delete＆＃34;相反。 DIV

这是您JSFiddle编辑的内容。我为 div 创建了一个名为＆＃34; tags-div＆＃34;的类，它在 MediaQuery 上设置为＆＃34; float：left;＆＃ 34;屏幕尺寸大于500px。

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