CSS @media標簽行為奇怪

Question

我正在嘗試使用@media標簽進行一些設計，以調整瀏覽器窗口的大小。

普通窗口：

調整大小的窗口：

（第三個故事（右邊的故事）消失了，元素變小了）

問題是當我將其調整為原始大小時，我得到：

碼：

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

.person_company是這些圖像：

我沒有發布整個@media代碼，因為如果刪除.person_company樣式，則不會發生此問題。 所以我假設這是導致問題的原因。

另外，請注意，在調整大小之前， chrome inspect元素在該元素上顯示float: right ，而在調整大小時，它顯示float: none ，向后放大時則顯示float: right 。 因此，我猜@media行為正確。 那么，是什么引起了問題呢？

Answer 1

Chrome中有一個錯誤，當您調整窗口大小時會導致位置問題。 發生這種情況時，請嘗試僅在兒童車的位置刷新頁面（F5）。 然后應正常顯示。

調整大小的錯誤。 :)

也許您可以在此處提供有關調整大小前后窗口大小的更多詳細信息。

Answer 2

當您具有!important的float規則，有時甚至display規則時，就會發生此錯誤。 這是因為即使重新調整了屏幕大小， !important也將保持活動狀態。 就目前而言，它幾乎無濟於事，我通常嘗試找到另一種放置元素的方式。 並不是用戶會坐下來調整窗口的大小，等等，但是如果您真的被這個錯誤困擾。 尋找定位的另一種方法:)