这是有问题的导航图像:
http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png
我想做的是非常基本的,过去我已经做过很多次了,我只是不明白为什么它现在不起作用。基本上使用上面的图像作为导航背景并相应地调整宽度和背景位置。这是我的CSS:
#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }
#navigation ul { margin: 0 0 0 20px; padding: 0; }
#navigation ul li { float: left; list-style: none; }
#navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}
#nav-home { width: 62px; }
#nav-home.active, #nav-home:hover { background-position: 0 -28px; }
#nav-cp { width: 130px; background-position: -62px 0; }
#nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }
#nav-web { width: 106px; background-position: -192px 0; }
#nav-web.active, #nav-web:hover { background-position: -192px -28px; }
#nav-clix { width: 106px; background-position: -298px 0; }
#nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }
#nav-dna { width: 90px; background-position: -405px 0; }
#nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }
这是页面上的代码,带有通用 HTML5 文档类型 <!DOCTYPE html>,为将来的校对指定:
<div id="navigation">
<ul id="nav-tabs">
<li><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-cp">Client Portal</a></li>
<li><a href="#" id="nav-web">Weboptima</a></li>
<li><a href="#" id="nav-clix">Clixfactor</a></li>
<li><a href="#" id="nav-dna">Lead DNA</a></li>
</ul>
</div>
我遇到的奇怪的事情是:第一个选项卡 Home 运行良好。其余四个选项卡不服从初始背景位置属性,除非我指定!important,但翻转工作得很好。以下是这两种情况的图像,分别是:
http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png
http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png
只是想对这个(希望如此)简单的问题有所了解。提前致谢!