Question

我在JS Fiddle上有一个HTML / CSS项目，有几个问题jsfiddle ZyBZT。

<DIV class"footer">未显示在底部。
背景图片不显示：url('http://i.imgur.com/z5vCh.png')
精灵图片未显示在<UL>列表中。

最初，Sprites正在工作，我添加的任何内容都没有改变任何Sprite CSS代码，如下所示：

#nav {
  list-style-type:none; /* removes the bullet from the list */
  margin:20 auto;
  text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
  white-space:nowrap; /* ensures text stays on one line */
  width:600px; /* Allows links to take up proper height */
}
#nav li {
  display: inline-block;
  text-align: center;
  width: 192px;    
}
#nav a {
  background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
  display: block;
  height: 50px; /* This allowed the buttons to be full height */
  color: Blue;
}
#nav a:hover {
  background-position: 0 -50px;
  color:Red;
}
#nav .active, a:hover {
  background-position: 0 0;        
  color: Black;
}
#nav .active:hover {
  background-position: 0 0;        
  color: Black;
}
#nav span {
  position:relative;
  text-align: center;
  vertical-align: middle; /* This doesn't seem to work (???) */
}

有时候，背景图片会起作用，但有时则不然。

最近，我一直试图让这个FOOTER div工作，现在看起来更多的东西搞砸了。

我应该如何判断一块CSS何时打破了另一块CSS？如何判断某些内容何时尝试执行CSS并且出现错误？

Answer 1

最好的是

使用Firebug或您选择的浏览器开发者工具查看浏览器正在应用的类/样式以及效果，
研究HTML标准，确保您正确编码;请记住，他们往往是反直觉的。 MDN在HTML layout，vertical alignment以及许多其他HTML / CSS / Javascript主题上都有一些优秀的文章。

Answer 2

很容易修复页脚问题：

div.footer {
  bottom:0px;
  position:fixed;
  text-align:center;
}

但是，这并不能回答主要问题：如何排查！

Answer 3

我发现的最好的工具是Firebug，它仍然比Chrome的工具更好。检查元素时，它将显示已应用样式的层次结构和已覆盖的样式。（带删除线）

这是了解正在发生的事情的最佳工具。

我认为你有z-index问题，文字阴影导致问题。删除了z-index:-1和text-shadow，后台的行为也是如此。

如何解决CSS问题？

3 个答案: