Question

http://ci2.totalshopuk.com的顶部导航在左侧有分隔线，这意味着最后一个链接没有分隔符。我要么删除第一个分隔符，要么在末尾添加一个。

我复制了.navmenuitem1样式并创建了一个新的.navmenuitemfirst1并删除了背景但奇怪的是第一个链接放在了其余部分的上面！？（即使是直接的风格副本也会做同样的事情。）

实施例： -

<ul class="navmenu1">
    <li class="navmenuitemfirst1"><a href="/">Home</a></li>
    <li class="navmenuitem1"><a href="/download">Download</a></li>
    <li class="navmenuitem1"><a href="/about">About Us</a></li>
    <li class="navmenuitem1"><a href="/faq">FAQ</a></li>
    <li class="navmenuitem1"><a href="/newsletter">Newsletter</a></li>
    <li class="navmenuitem1"><a href="/license">License</a></li>
    <li class="navmenuitem1"><a href="/contact">Contact Us</a></li>
</ul>

最后，在IE6中没有任何背景图片显示，我只是将颜色作为背景......但http://www.totalshopuk.com上原始表格设计的背景显示正确。

非常感谢任何帮助！

- 复制所有.navmenuitem样式修复了分隔符问题 -

.navmenuitemfirst,.navmenuitem {
    display: inline;
    margin: 0;
    padding: 0;
}

.navmenuitemfirst a {
    color: #FFF;
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
}

.navmenuitem a {
    background: url(../images/navdivider.png) no-repeat;
    color: #FFF;
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
}

.navmenuitemfirst a:hover,.navmenuitem a:hover {
    color: #E64D29;
}

Answer 1

Probaly .navmenuitem1的位置为：relative和float：left，而.navmenuitemfirst1则没有。当utopicam要求为它制作一个jsfiddle时，我们可以用它来检查css。

Answer 2

好的，第一个问题的答案可能与a：

有关

http://jsfiddle.net/9DTTd/1/

我为.navmenuitemfirst1 a

创建了一个新类

当背景样式位于a（a是具有背景的块）时，您可能只应用了新类。我看不到线条有任何错误，但请检查并告诉我。这也可以回答关于背景的第二个问题，但我没有ie6来检查它：3

编辑：我后来注意到它为什么不起作用，傻我。该类还需要内联属性：

.navmenuitem1,.navmenuitem2,.navmenuitemfirst1 {
    display: inline;
    margin: 0;
    padding: 0;
}

CSS设计mods和旧IE6的问题

2 个答案: