Html 如何解决CSS问题？

我有一个关于JS的HTML/CSS项目，其中有几个问题

• 未显示在底部
• 背景图像不显示：

  url（'http://i.imgur.com/z5vCh.png）

• 精灵图像未显示在

  列表中
  
  最初，精灵正常工作，我添加的任何内容都没有改变任何精灵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 (???) */
  }
  ​
  
  有时，背景图像可以工作，但有时不能
  
  最近，我一直在尝试让这个页脚div正常工作，但现在看来，更多的页脚div被弄糟了
  
  当一个CSS片段打破另一个CSS片段时，我应该如何判断？当有东西试图执行CSS时出现错误，我该如何判断？
  您最好
  
  使用或您选择的浏览器开发人员工具查看浏览器应用的类/样式、效果，以及
  研究HTML标准，确保编码正确；请记住，它们通常是违反直觉的。MDN有一些关于HTML/CSS/Javascript和许多其他HTML/CSS/Javascript主题的优秀文章
  简单地修复了页脚问题：
  
  div.footer {
    bottom:0px;
    position:fixed;
    text-align:center;
  }
  
  但是，这并不能回答主要问题：如何排除故障
   我找到的最好的工具是Firebug，它仍然比Chrome的工具好。检查图元时，它将显示应用样式和已被替代样式的层次结构。（带删除线）
  
  这是您查看正在发生的事情的最佳工具
  
  我认为你有z索引问题，而文本阴影造成了问题。
  删除了
  z-index:-1
  和
  文本阴影
  以及背景行为。
  Google Chrome（以及其他浏览器都有开发人员工具）右键单击inspect元素非常有用，您可以动态更改CSS和HTML。您不能使用imgur托管图像，它们会发回403。即使这样做有效，imgur也不足以为您的UI元素提供服务。Nate，当我使用Chrome时，它在我的
  背景：
  元素中划出了一条线。为什么？这是什么意思？迈克，我在这里发帖时只使用Imgur。我们的项目是一个内部内联网，因此它没有通过外部世界访问的链接。有更合适的地方张贴吗？我使用Imgur是因为每当上传图片时，SO都会在这里发送图像。关于背景线：这意味着有另一种CSS样式覆盖了您的样式，可能是因为具有更高的选择器专用性。+1。目前，我使用Chrome和IE进行开发。每次我尝试下载Firefox版本时，安装人员都希望附加我不信任的所有膨胀软件，因此我取消安装。@jp2code膨胀软件？您是否正在从官方网站下载安装程序？我想不起那里有什么臃肿的东西，但你总是可以使用一个优化的FF构建，比如Pale Moon或Waterbox。啊！甚至连Waterbox都在尝试安装AVG安全工具栏。最近所有这些公司都试图通过安装程序向你发送垃圾邮件，这是怎么回事？我很确定AVG安全工具栏是免费的，所以如果我想要它，我会去拿它。如果出现任何问题，你应该总是删除CSS/HTML/Javascript，而不是添加。您可以使用Chrome上的Web Inspector“实时”完成此操作。右键单击并选择“检查元素”。它将向您展示HTML/CSS的结构，您可以删除节点和更改CSS。尝试删除与问题无关的所有内容（例如HTML代码、不适用于此项目的Javascript等）。希望有帮助。