调整大小时带有 CSS 浮动的 Chrome 中的响应错误答案

【问题标题】：Responsive bug in Chrome with CSS floats while resizing调整大小时带有 CSS 浮动的 Chrome 中的响应错误
【发布时间】：2013-06-10 00:38:13
【问题描述】：

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

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

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

感谢任何帮助。

【问题讨论】：

标签： html css google-chrome responsive-design

【解决方案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>

【讨论】：

天哪，谢谢...我太盲目了，我很惭愧哈哈。我只是从我的源代码中复制了菜单代码，即使有错误。

【解决方案2】：

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

【讨论】：