Css @media 标签表现得很奇怪

Question

我正在尝试一些带有@media 标签的设计，以调整浏览器窗口的大小。

普通窗口：

调整大小的窗口：

（第三层（右边的）消失了，元素变小了）

问题是当我将其调整回原始大小时，我得到：

代码：

@media screen and (max-width: 998px){
    ...
    .person_company{
        float: none !important;
    }
    ...
}

.person_company是这些图片：

我没有发布整个@media 代码，因为如果我删除.person_company 样式，则不会发生此问题。所以我假设它是导致问题的原因。

另外，请注意，在调整大小之前，chrome 检查元素 在该元素上显示float: right，调整大小时显示float: none，放大后显示float: right。所以我猜@media 是正确的。那么是什么导致了这个问题呢？

Answer 1

Chrome 中有一个错误会在您调整窗口大小时导致位置问题。当它发生时，尝试在错误位置刷新页面 (F5)。然后应该可以正常显示了。

调整大小错误。 :)

也许您可以在此处提供有关调整大小前后窗口大小的更多详细信息。

Answer 2

当您有float 的!important 规则，有时甚至是display 时，就会出现此错误。这是因为!important 将保持活动状态，即使屏幕已重新调整大小。现在几乎没有什么可做的，我通常会尝试找到另一种定位元素的方法。这不像用户会坐下来上下调整窗口大小等，但如果你真的被这个错误所困扰。寻找另一种定位方式:)