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

Question

我遇到了这个问题，我希望它是如此简单，这就是我无法理解的原因。

我想在导航<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>）

Answer 1

首先是第一件事：

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

建议：

我会，如果是你，请将divide课程改为li。这样，你至少有标准的HTML，也许它甚至可以修复页面。除此之外，我需要一个演示链接，因为熊会吃你建议任何帮助。

---

我不完全确定“整个背景”的含义，但我建议您使用background-position和background-repeat来提供帮助。仔细阅读these，它可以帮助您弄清楚您想做什么。

Answer 2

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

然后，为了使分隔符看起来更接近列表项，只需调整.divider类的边距/填充