Ответная ошибка в Chrome с CSS-поплавками при изменении размера

Question

У меня есть основной заголовок веб-сайта, и внутри у меня есть логотип, плавающий влево, и меню перемещается вправо.

Заканчивать этот Js скрипку http://jsfiddle.net/RjHxR/6/

Меню горизонтальное, так я применил float:left на #main_menu li пунктов. Но я тоже хочу, чтобы меню реагировало, поэтому я применил float: none на #main_menu li элементах на определенных размерах экрана, потому что я хочу иметь стандартное вертикальное меню на этих размерах экрана (см. Js fiddle css). Когда я изменяю размер Google Chrome до этого разрешения, он выглядит нормально. Но когда я пытаюсь изменить размер браузера до более высокого разрешения, #main_menu li пунктов остаются на float: none, хотя float: left указан для этого разрешения! И это происходит только в Chrome. Попробуйте сами на jsfiddle.

Любая помощь приветствуется.

Answer 1

У вас есть незакрытые теги анкерных ваш навигационный список, как только вы исправите, что страница проверяется, и проблема исчезает в браузерах webkit: http://jsfiddle.net/panchroma/PUmyx/.

Go цифра, почему это вспышка будет иметь такой эффект;)

HTML

<div id="header"> 
<div id='logo'>LOGO</div> 
<nav> 
    <ul id="main_menu"> 
     <li><a href='#'>HOME</a></li> 
     <li><a href='#'>PAGES</a></li> 
     <li><a href='#'>BLOG</a></li> 
     <li><a href='#'>WORK</a></li> 
     <li><a href='#'>ELEMENTS</a></li> 
         <li><a href='#'>CONTACT US</a> 

     </li> 
    </ul> 
</nav> 
</div> 

Answer 2

Хром автоматически предоставляет личный номер display:list-item с листа стиля Chrome. Поэтому, когда вы удаляете float: left и снова включаете float, у него есть дисплей по умолчанию: list-item и останется в списке.

Для получения желаемого эффекта ищет, сделать display атрибут inline по умолчанию, а затем изменить display:list-item внутри вашего состояния СМИ как так:

#main_menu li { 
    display: inline; 
    margin-left: 10px; 
} 
@media screen and (max-width: 600px) { 
    #main_menu li { 
     display:list-item; 
    } 
    #header { width: 100%;} 
}