1

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

  • 没有出现<DIV class"footer">在底部。
  • 背景图像不显示：url('http://i.imgur.com/z5vCh.png')
  • Sprite 图像未显示在<UL>列表中。

最初，Sprite 正在工作，我添加的任何内容都没有更改任何 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 并且出现错误？

4

3 回答 3

2

你能做的最好的就是

  1. 使用Firebug或您选择的浏览器开发人员工具来查看浏览器正在应用哪些类/样式，以及效果，以及
  2. 研究 HTML 标准以确保正确编码它们；请记住，它们通常是违反直觉的。MDN 有一些关于HTML 布局、垂直对齐和许多其他 HTML/CSS/Javascript 主题的优秀文章。
于 2012-09-26T16:07:32.820 回答
0

我为此找到的最好的工具是 Firebug，它仍然比 Chrome 的工具好。当您检查一个元素时，它将向您显示应用样式的层次结构以及那些已被覆盖的样式。（带删除线）

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

我认为您遇到了 z-index 问题，并且 text-shadow 导致了问题。删除了z-index:-1and thetext-shadow和背景行为。

于 2012-09-26T17:01:40.250 回答
0

很容易地修复了页脚问题：

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

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

于 2012-09-26T16:15:35.737 回答