影响Firefox中CSS精灵导航的表达式引擎路径/URL

我目前正在将一个HTML站点放入表达式引擎。该站点使用body ID标记来驱动sprite导航，而不是当前/活动类。当我创建带有空白链接的站点索引时，导航显示正确。但是，当我将页面链接到适当的模板时，精灵位置都默认为导航的a:链接位置中的最后一个精灵。当鼠标悬停时，链接将正确显示，当单击时，将我带到正确的位置并更改到正确的a:焦点/悬停位置。这种行为发生在Firefox中，而不是Safari中。在Safari中，一切都如我所料。 我正在本地安装中使用ExpressionEngine2.x。我已经重新检查了频道URL和站点配置设置，但是对于问题可能是什么，我已经没有什么想法了。 如有任何想法，将不胜感激

这是我面临的问题的一个重要方面。第一行是导航在Firefox中的显示方式。第二行是当链接悬停在上面时链接的外观。第三个问题是如何在Safari中呈现导航

这是用于导航的css：

/* navigation */
#nav    {
background: url("/img/nav-bg.gif") no-repeat top left;
position:absolute;
top:176px;
width:960px;
height:44px;
z-index:20;
}

ul#navlist {
position:relative;
height:35px;
width:512px;
padding-left:192px;
margin-top:4px;
overflow:hidden;
}


ul#navlist li   {
padding:0;
margin:0;
float:left;
margin:0px;
text-indent:-9999px;
list-style:none;
}

ul#navlist li a {
display:block;
background-image:url("/img/main-nav-sprite.jpg");
background-repeat:no-repeat;
overflow:hidden;
}

ul#navlist li a:link, #navlist a:visted {
display:block;
}

li#home a {
width:82px;
height:35px;
}

li#services a {
width:101px;
height:35px;
}

li#portfolio a {
width:105px;
height:35px;
}

li#blog a {
width:76px;
height:35px;
}

li#about a {
width:82px;
height:35px;
}

li#contact a {
width:65px;
height:35px;
}

li#home a:link, a:visited   {
background-position:0px 0px;
}

li#home a:hover, a:focus    {
background-position: 0px -35px;
}

li#services a:link, a:visited   {
background-position:-82px 0px;
}

li#services a:hover, a:focus    {
background-position: -82px -35px;
}

li#portfolio a:link, a:visited  {
background-position:-183px 0px;
}

li#portfolio a:hover, a:focus   {
background-position: -183px -35px;
}

li#blog a:link, a:visited   {
background-position:-288px 0px;
}

li#blog a:hover, a:focus    {
background-position: -288px -35px;
}

li#about a:link, a:visited  {
background-position:-364px 0px;
}

li#about a:hover, a:focus   {
background-position: -364px -35px;
}

li#contact a:link, a:visited    {
background-position:-447px 0px;
}

li#contact a:hover, a:focus {
background-position: -447px -35px;
}

/* Main Navigation Active States */
body#home-page ul#navlist li#home a {
background-position:0 -35px;
}

body#services-page ul#navlist li#services a {
background-position:-82px -35px;
}

body#folio-page ul#navlist li#portfolio a   {
background-position:-183px -35px;
}

body#blog-page ul#navlist li#blog a {
background-position:-288px -35px;
}

body#about-page ul#navlist li#about a   {
background-position:-364px -35px;
}

body#contact-page ul#navlist li#contact a   {
background-position:-447px -35px;
}
/* end */

这是附加的html导航代码：

    <div id="nav">
    <ul id="navlist">
    <li id="portfolio"><a href="http://localhost:8888/portfolio" title="hue samples">portfolio</a></li>
    <li id="blog"><a href="http://localhost:8888/news" title="learn with us">blog</a></li>
    </ul>
    </div>
    <!-- ***nav -->

---

我也尝试使用{path=“template group/template”}，但结果类似。

检查以确保模板中的内容正确

如果您的CSS是ExpressionEngine模板：

<link href="{stylesheet=template_group/template_name}" media="all" />

要确认路径是否正确，请使用更适合您的方法，并使用以下方法查找错误：

• Firefox的Firebug
• Safari的活动监视器或WebKit检查器
• Chrome的开发工具
• Apache的

  错误日志

---

如果您可以发布一些代码示例，这将使进一步解决问题变得更容易。

查看CSS，您在样式表中多次声明了一些相同的规则。因此，样式表后面出现的任何规则都将覆盖与同一选择器匹配的任何以前的规则

因此，您可以通过删除不必要的

:link

，

:visted

等来大大简化CSS，这将使调试图像精灵变得更加容易

例如，考虑下面的HTML：

<div id="nav">
    <ul id="navlist">
        <li id="portfolio"><a href="#">portfolio</a></li>
    </ul>
</div>

---

消除和消除（爱恨）CSS中不需要的伪类将大大降低调试问题的复杂性。

我的样式表似乎很好-这是我使用的代码

我很早就将图像链接更改为绝对路径。
当我的导航代码看起来像这样时id=“navlist”>
/code
一切在视觉上都很好。
当我用url
code
“{path=“template\u group/template”}
/code>将精灵作为最后一个链接状态显示。因此，我在Firefox中看到的不是“关于”，而是“联系”。悬停没关系。你有一个可以共享的URL，或者一个显示问题的JSFIDLE吗？注意：Stack Overwr允许您在询问后通过更新更多信息来编辑问题。。。所以你可以在那里添加你的代码，而不是让它在评论中被删掉。我添加了一个图像链接，因为该网站的一些片段仍然存在于我的本地机器上。感谢大家对更新帖子功能的关注，这会容易得多。看起来你的问题与CSS密切相关，而不是ExpressionEngine。你能发布相关的CSS吗？或者附加到你的问题中，或者最好是在一篇文章中？另外，您是否考虑过简单地使用CSS3属性与@font-face规则结合使用，而不是使用图像精灵？在EE实现之前，没有精灵问题，但我会发布css，因为我可能没有看到任何东西。我正试图用尽可能少的脚本来实现这个网站，所以我远离了字体匹配技术。我将最小化CSS，看看情况如何。嘿，我只是按照你的建议节食了CSS，我的sprite现在在EE中运行正常！非常感谢你的建议。我自己也不会认为吕哈是个问题。不客气！如果你对我的答案感到满意，一定要投赞成票，这样马克就被接受了。谢谢
#foo {
    background: url(/images/sprite.png) no-repeat left top;
}

<div id="nav">
    <ul id="navlist">
        <li id="portfolio"><a href="#">portfolio</a></li>
    </ul>
</div>

li#portfolio a {
    background-position: -183px 0;
    height: 35px;
    width: 105px;
}

li#portfolio a:hover {
    background-position: -183px -35px;
}