Html 为什么我的雪碧只露了一部分？

我为导航栏创建了一个精灵，通过javascript/Jquery，我可以轻松地在悬停开/关状态之间切换。我的问题是，我不确定我的css是否会显示css类Whatis1031Exchange，以及如何启动不会显示

这是我的Html

 <ul id="nav">
            <li class="nav-button" id="home"><a href="Index.html"></a></li>
            <li class="nav-button" id="whatIS1031"><a href="whatIs1031.html"></a></li>
            <li class="nav-button" id="1031Exchange"><a href="exchangeRequ.html"></a></li>
            <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li>
            <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li>
            <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li>
            <li class="nav-button" id="resources"><a href="resources.html"></a></li>
            <li class="nav-button" id="faq"><a href="fAQs.html"></a></li>
            <li class="nav-button" id="fee"><a href="fees.html"></a></li>
            <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li>
        </ul>
        <!--End of nav-->

这是我在代码笔上的代码

---

这是我的sprite在photobucket上的副本

本项目的所有HTML和CSS都值得彻底检查，但以下是您具体问题的答案：

由于资本化，whatIS1031没有出现。元素的ID有一个大写的“whatIS1031”，而CSS选择器有一个小写的“whatIS1031”。 howToStart没有显示，因为背景url的第一个CSS声明中缺少它。相反，h-howToStart出现两次。

---

旁注：您应该试用Chrome的开发工具或Firefox的Firebug。它们都提供了检查DOM元素以查看应用了哪些CSS样式的方法。从这里，您可以看到缺少哪些样式。

此项目的所有HTML和CSS都需要大修，但以下是您具体问题的答案：

由于资本化，whatIS1031没有出现。元素的ID有一个大写的“whatIS1031”，而CSS选择器有一个小写的“whatIS1031”。 howToStart没有显示，因为背景url的第一个CSS声明中缺少它。相反，h-howToStart出现两次。

---

旁注：您应该试用Chrome的开发工具或Firefox的Firebug。它们都提供了检查DOM元素以查看应用了哪些CSS样式的方法。从这里您可以看到缺少哪些样式。

除了这里提到的特定ID命名问题之外，没有理由在javascript中这样做，因为CSS有一个完美的解决方案：

让我们以家为例：

#home {
    background-position: 0 0;
}

#home:hover {
    background-position: -222px 0;
}    

对每个元素重复此操作。 您可能还希望优化CSS：

而不是为每个ID应用背景图像-

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

使用已应用于元素的类：

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

此外，如果每个ID的大小都相同，则不必分别为它们指定元素大小。只要使用-

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width:225px;
    height:30px;
}

---

除了这里提到的特定ID命名问题之外，没有理由在javascript中这样做，因为CSS有一个完美的解决方案：

让我们以家为例：

#home {
    background-position: 0 0;
}

#home:hover {
    background-position: -222px 0;
}    

对每个元素重复此操作。 您可能还希望优化CSS：

而不是为每个ID应用背景图像-

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

使用已应用于元素的类：

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

此外，如果每个ID的大小都相同，则不必分别为它们指定元素大小。只要使用-

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width:225px;
    height:30px;
}

---

你为什么不制作这两种状态的精灵，并在元素上方手动编写文本？你的方法不是对搜索引擎友好，只是一种旁白，IDs不应该以数字开头，也请注意，您最好使用css的：hover pseudo类，而不是使用JS。我不否认这不是它的搜索引擎朋友，只是这些是我提供的图像。您应该使用display:block并将图像放在锚定标记上，不是LI。你为什么不制作两个状态的精灵，并在元素上方手动编写文本？你的方法不是对搜索引擎友好，只是一种旁白，IDs不应该以数字开头，也请注意，您最好使用css的：hover pseudo类，而不是使用JS。我不否认这不是它的搜索引擎朋友，只是这些是我提供的图像。您应该使用display:block并将图像放在锚定标记上，不是LI。进一步补充说明：在修复此类问题时，验证html和css与浏览器工具一样好，虽然浏览器工具在大多数其他方面都非常优越。谢谢你的回答，再加上s-in-id上的DA响应，这最终导致我解决了我的问题，是的，我同意你的看法，我的html和css确实值得大修。我还是个新手，每天都在努力学习。谢谢你接受我的回答！@Roy答案中的注释是我推荐的重构类型，比如使用CSS而不是JS，使用CSS级联将相同的样式应用于一组元素。我还建议对所有导航元素使用类而不是ID，这样，无论出于何种原因，如果您不得不添加第二个导航栏，您就不必担心代码中断，因为这会假定页面上只有一个特定的内容。进一步补充说明：在解决此类问题时，验证html和css与浏览器工具一样好，虽然浏览器工具在大多数其他方面都非常优越。谢谢你的回答，再加上s-in-id上的DA响应，这最终导致我解决了我的问题，是的，我同意你的看法，我的html和css确实值得大修。我还是个新手，每天都在努力学习。谢谢你接受我的回答！@Roy答案中的注释是 我推荐的那种重构，比如使用CSS而不是JS，使用CSS级联将相同的样式应用于一组元素。我还建议对所有导航元素使用类而不是ID，这样，无论出于何种原因，如果您不得不添加第二个导航条，您就不必担心代码中断，因为页面上只有一个特定的内容。