导航中的CSS跨浏览器图像分隔器

我有这个问题，我希望它是如此简单，这就是为什么我无法弄清楚。导航中的CSS跨浏览器图像分隔器

我想在导航<li>元素之间使用图像分隔符。

这里是我的CSS：

#nav { 
    width:70.5%; 
    padding-left:29.5%; 
    list-style: none; 
    margin: 0px auto; 
    float:left; 
    background-image:url(images/bk_nav.gif); 
    background-repeat:repeat-x; 
    display:block; 
    text-align:center; 
    #margin-top:-4px; 
} 


#nav li { 
    float: left; 
    margin: 0px; 
    text-align:center; 
    font: 13px/100% Helvetica, Arial, sans-serif; 
    background-color:#cccccc; 
} 
.divide 
{ 
    position:relative; 
    float:left; 
    width:4px; 
    height:42px; 
    background-image:url(images/divider.gif); 
} 
#nav a { 
    color: #ffffff; 
    text-decoration: none; 
    text-align:center; 
    padding: 14px 25px 14px 25px; 
    font: 14px/100% Helvetica, Arial, sans-serif; 
    display: block; 
    text-align:center; 
}

下面是HTML：

<ul id="nav"> 
     <li class="page-item-2 current_page_item"><a href="index.html">Home</a></li><span class="divide"></span> 
     <li class="page-item-20"><a href="aboutus.html">Our Program</a></li> 
     <li class="page-item-10"><a href="econsus.html">Social</a></li> 
     <li class="page-item-13"><a href="socialsus.html">Economic</a></li> 
     <li class="page-item-15"><a href="envsus.html">Environmental </a></li> 
     <li class="page-item-17"><a href="resources.html">Resources </a></li> 
    </ul>

目前我只有一个分压器在那里，因为我正在测试它。此代码在FF中正常工作，但IE被它破坏。任何人都可以看到这种令人沮丧的情况？

更新：

一个是正确的，另一个不是。我能够在FF中创建相同的错误，所以你可以看到两者。（刚搬进的<span>）

alt text

来源

2010-08-27 balexander

的保证金/填充你能也许提供你要的效果截图，以及它如何“摧毁”IE？ – 2010-08-27 15:06:37

...或演示的链接？ – 2010-08-27 15:07:09

@all链接添加。 – balexander 2010-08-27 15:14:39

<ul> 
    <li>list item</li>` 
    <li class="divider"></li> 
    <li>list item 2</li> 
</ul>

然后，为了使除法似乎更接近列表项，只需调整分频器和类

来源

2010-08-27 15:18:52 Moses

冰雹摩西！我无法相信我忘记了这一点。过了一段时间，我添加了这些分隔符......上帝，我是一个白痴=/ – balexander 2010-08-27 15:24:29

没问题，通常是我们往往忽略的最简单的事情。 – Moses 2010-08-27 15:26:34

第一件事的第一：

一个span不能是ul元素的直接孩子。它不是标准的HTML，所以不知道会发生什么。只有li s可以是ul s的子女。

建议：

我想，如果我是你，把divide类上，而不是li。这样，你至少有标准的HTML，甚至可以修复页面。除此之外，我需要一个链接到演示，因为熊会吃你建议的任何援助。

我不能完全确定什么是“整个背景”的意思，但我会建议你使用background-position和background-repeat帮助。通过these阅读，它应该可以帮助你弄清楚你想做什么。

来源

2010-08-27 15:12:26

@Jeff Rupert我可以把小分隔图像放在li上吗？上面提供的链接。 – balexander 2010-08-27 15:14:00

“整个背景”是什么意思？ – 2010-08-27 15:14:52

@ Bry4n：是的;你可以使用'background-repeat：none;'来防止它在整个'li'中重复。再加上'background-position'来恰当地定位它。 – 2010-08-27 15:18:48

导航中的CSS跨浏览器图像分隔器

回答

相关问题