在调整大小时，Chrome中带有CSS的响应式错误会浮动

Question

我有一个基本的网站标题，里面我的标识浮动到左边，菜单浮动到右边。

看看这个小提琴 http://jsfiddle.net/RjHxR/6/

菜单是水平的，因此我在float:left项目上应用了#main_menu li。但是，我想让菜单响应，所以我在某些屏幕尺寸的float: none项目上应用了#main_menu li，因为我希望在这些屏幕尺寸上有一个标准的垂直菜单（参见js fiddle css ）。当我将谷歌浏览器的大小调整为该分辨率时，似乎没问题。但是，当我尝试将浏览器的大小调整为更高的分辨率时，#main_menu li项仍保留在float: none上，即使为该分辨率指定了float: left！它只发生在Chrome中。在jsfiddle上自己尝试一下。

感谢任何帮助。

Answer 1

Chrome会自动从Chrome样式表中提供li display:list-item。因此，当你删除float：left并重新启用float时，它具有默认的display：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%;}
}

Answer 2

一旦您修复了页面验证并且问题在webkit浏览器中消失，您的导航列表中就会显示未关闭的锚标记：http://jsfiddle.net/panchroma/PUmyx/。

去了解为什么那个blip会产生这种效果;）

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>