影响 Firefox 中 CSS sprite 导航的表达式引擎路径/url

Question

我目前正在将一个 HTML 站点放入 Expression Engine 中。该站点使用主体 ID 标签来驱动精灵导航，而不是当前/活动类。当我创建带有空白链接的网站索引时，导航显示正确。然而，当我将页面链接到适当的模板时，精灵位置都默认为导航的 a:link 位置中的最后一个精灵。当悬停时，链接将正确显示，单击时将我带到正确的位置并更改为正确的 a:focus/hover 位置。此行为会出现在 Firefox 中，但不会出现在 Safari 中。在 Safari 中，一切都按照我的预期显示。 我在本地安装上使用 Expression Engine 2.x。我也重新检查了频道网址和站点配置设置，但我不知道问题出在哪里。 任何想法将不胜感激。

这是我遇到的问题的视觉。 。第一行是导航在 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"} 但结果相似。

Answer 1

检查并确保您正确链接到样式表你的模板。

如果您的 CSS 是 ExpressionEngine 模板：

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

如果您的 CSS 是服务器上的文件：

<link href="{path=/css/screen.css}" media="all" />

如果您的样式表正确链接，则问题的唯一其他可能是样式表中到精灵的路径。

我更喜欢使用图像的绝对路径，因此它使维护变得容易：

#foo {
    background: url(/images/sprite.png) no-repeat left top;
}

要确认您的路径是否正确，请使用对您来说更舒服的方法，并使用以下方法查找错误：

• Firefox 的 Firebug
• Safari 的活动监视器或 WebKit Inspector
• Chrome 的开发人员工具
• Apache 的 错误日志。

如果您可以发布一些代码示例，则可以更轻松地进一步排除您的问题。

Answer 2

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

因此，您可以通过删除不必要的 :link、:visited 等来极大地简化 CSS 伪类选择器 这将使调试图像精灵变得更加容易。

例如，考虑以下 HTML：

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

相关 CSS 可以简化并合并为：

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

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

删除并消除 LVHA (LOVE HATE) CSS 中不需要的伪类 将大大降低调试的复杂性 问题。