CSS 在 Chrome 中工作，但不适用于 IE 或 Firefox答案

【问题标题】：CSS working in Chrome, but not IE or FirefoxCSS 在 Chrome 中工作，但不适用于 IE 或 Firefox
【发布时间】：2013-06-07 11:14:35
【问题描述】：

我正在为客户开发一个网站并尝试将多个菜单添加到单个页面。它们的标签完全不同，到目前为止，其中一个菜单只是一个列表。它没有 css 格式，并且根本没有链接到样式表。第一个菜单可能是问题的原因。无论如何，我有一个这样的列表：

<ul>
    <li><a href="#"><span>All</span></a></li>
    <li><a href="#"><span>Test Category</span></a></li>
    <li><a href="#"><span>Another test</span></a></li>
    <li><a href="#"><span>More tests</span></a></li>
    <li><a href="#"><span>Categories</span></a></li>
</ul>

这在 Google Chrome 中运行良好，但是每当我在 Firefox 或 Internet Explorer 中打开它时，它的格式如下： http://gyazo.com/74157a833e0bff1e62a2a6cba5db5f5f

由于我不太确定问题的根源是什么，它太大而无法发布，而且 CSS 和 HTML 是客户端，我将避免在此处发布所有代码，但请随意查看我的代码http://www.capbig.tk

注意：网站当前所在的服务器偶尔会变得无响应。它只会返回一个空白页。请耐心等待，我知道您正在尝试帮助我，因此对于给您带来的任何不便，我深表歉意。

非常感谢任何帮助。谢谢！

【问题讨论】：

jsfiddle.net/3FXZ3 在 IE、FF 和 Chrome 中对我来说看起来一样
一些好消息，它似乎在 Safari 和我的 Firefox 中运行良好。也就是说，如果您在谈论第一个菜单。
我说的是它下面的列表。这将是一个菜单，但现在它只是一个列表。它没有在 IE 或 FF 中正确显示。抱歉不清楚。
底部列表没有任何样式？这在我的浏览器中仍然显示得很好。您是否尝试清除浏览器的历史记录以查看是否有帮助。有时当我使用 Firefox 时，如果是 html/css 问题，我必须这样做。
说得太早了……说清楚：两者；在您的类别 ID 上

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

把它放在你的样式表中。

#categories{
  clear:both;

}

现在请记住，列表会被下推一些，但那是因为您将顶部列表定位到了 -100 像素。

【讨论】：

当然！当您将元素浮动到右侧或左侧以定位它们时，您总是必须在之后清除它，否则该元素将继承浮动。我总是说清楚：两者；因为稍后我的一些样式可能会改变，我最终会以另一种方式浮动元素或做其他事情。所以这就像一个小故障保险。很高兴我能帮上忙！ :) 你可以在这里阅读更多内容w3schools.com/cssref/pr_class_clear.asp