回到原始窗口大小后，css @media 不会重新渲染

Question

我有一个普通的网站 CSS。在创建一些@media 查询以使我的元素在移动设备和不同分辨率上具有不同的颜色、大小等之后，一切都很好。

问题是当我将窗口从正常大小调整为小窗口时，应用了效果，但是当我调整回正常大小时，css 没有刷新，一些“移动”规则保留在那里。

如何在没有@media 规则的情况下重新呈现 css，而不是刷新页面。

这是我的 HTML 示例:

<div class="item">
    <span class="item-foo">FOO </span>
    <span class="item-bar">BAR </span>
</div>

使用以下 CSS:

.item-bar{
    float: right;
}

@media only screen and (max-width: 992px){
    .item-foo, .item-bar{
        display: block;
        float: none !important;
    }
}

这是它的代码笔: Codepen

如果您将 View 区域的大小调整为较小的尺寸，直到它们在每一行中变成一个跨度并返回到更大的尺寸，“栏”元素将不会位于正确的位置。

Answer 1

正如@JesseKernaghan 在评论中指出的那样，这是一个 chrome 错误。正如@SeanKeating 所建议的，简单的解决方法是增加按钮的特异性来解决这个问题。

在这个问题的情况下，添加这个样式解决了问题:

.item .item-bar{
  float: right;
  display: inline;
}

这是使用 easy-fix 更新的代码笔 http://codepen.io/matheusbaumgart/pen/yyzXpp