调整大小时使用CSS浮动的Chrome中的响应性错误

Question

我有一个基本的网站标题和内部我有漂浮到左边的标志和菜单漂浮到右边。

查看这个js fiddle http://jsfiddle.net/RjHxR/6/

菜单是水平的，所以我在#main_menu li项目上应用了float:left。但是，我也想让菜单具有响应性，所以我在特定屏幕大小的#main_menu li项目上应用了float: none，因为我想在这些屏幕大小上有一个标准的垂直菜单(参见js fiddle css)。当我调整Google Chrome到那个分辨率时，它看起来没问题。但是，当我尝试将浏览器调整回更高的分辨率时，#main_menu li项仍然保留在float: none上，即使为该分辨率指定了float: left！而且这种情况只发生在Chrome上。你自己在jsfiddle上试试吧。

任何帮助都是非常感谢的。

Answer 1

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

去弄清楚为什么那个小插曲会有这样的效果;)

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

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%;}
}