css @media не перерисовывается после возврата к исходному размеру окна

Question

У меня есть обычный общий CSS для веб-сайта. После создания некоторых запросов @media, чтобы мои элементы имели разные цвета, размеры и т. Д. На мобильных и разных разрешениях, все в порядке.

Проблема заключается в том, что я изменяю размеры окон от нормального размера до небольшого, эффекты применяются, но когда я изменяю размер до нормального, css не обновляется, некоторые «мобильные» правила остаются там.

Как перерисовать css без правил @media, а не обновлять страницу.

Это пример моего 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 его: Codepen

Если изменить размер области просмотра до небольшого размера, пока они не превратятся в один пролет в каждую линию и не вернутся к большему размеру, элемент «бар» не будет в нужном месте.

Answer 1

Как @JesseKernaghan указал в комментариях, это хромированная ошибка. Легкое исправление будет увеличивать специфичность для кнопки, фиксирующей это, как это предлагает @SeanKeating.

В случае на этот вопрос, добавив, этот стиль зафиксировал проблему:

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

Вот codepen обновляется с простой исправить http://codepen.io/matheusbaumgart/pen/yyzXpp