NavBar显示不同的Chrome / Firefox

Question

我遇到一个奇怪的问题，我创建的导航栏在Chrome中的显示方式与Firefox不同。这是每个的截图。 Firefox正确显示它：

虽然Chrome中的背景颜色丢失了：

我创建了一个小提琴here，但使用Chrome在jsfiddle网站上查看时问题并不明显。在实时Chrome浏览器中，即使使用body，z-index声明也会覆盖导航栏的定义。有关如何解决此奇怪问题的任何想法？我现在正在使用旧版Chrome（21.0.1180.90），试图确保向后兼容性。谢谢你的想法！

Answer 1

您的代码在OS X 10.8.2上的“实时Chrome浏览器”21.0.1180.89（找不到21.0.1180.90）中运行良好。

我认为你错过了z-index：

的观点

  

对于定位框，'z-index'属性指定：

     

  
• 当前堆叠上下文中框的堆栈级别。
  
• 框是否建立堆叠上下文。
  

http://www.w3.org/TR/CSS2/visuren.html#z-index

z-index不会用于覆盖任何其他css声明。

Answer 2

您的代码适用于Chrome版本24，Firefox和Internet Explorer 10。也许问题只出现在那个版本的Chrome中，或者你在其他地方覆盖它。