css - 回到原始的Windows大小后，css @media无法重新渲染

我有一个网站的普通通用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

如果将视图区域的大小调整为较小的大小，直到它们在每行中跨一个范围并返回较大的大小，则“ bar”元素将不在正确的位置。

最佳答案

正如@JesseKernaghan在评论中指出的那样，这是一个Chrome错误。
如@SeanKeating所建议的那样，容易修复的问题将是增加按钮修复的特异性。

在此问题的情况下，添加此样式可解决此问题：

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

这是用简单修复程序更新的codepen
http://codepen.io/matheusbaumgart/pen/yyzXpp

关于css - 回到原始的Windows大小后，css @media无法重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28286901/