并非所有li元素的背景图片都显示出来答案

【问题标题】：Not all the background images of li elements are displayed并非所有li元素的背景图片都显示出来
【发布时间】：2015-08-13 06:49:12
【问题描述】：

我有一个带有垂直分隔符的 Bootstrap 导航，分隔符实际上是 li's 元素的背景图像。

这里是分隔符的代码：

.navbar-default li + li {
    background:url('../images/buffer1.png') no-repeat top right;
    background-size: auto 90%;
    background-position:right center;
    display: block;

}

这是一个活生生的例子：http://www.bootply.com/QojGnD6oyU

问题是在 Firefox 和 IE（所有版本）中，而不是 6 个垂直分隔符，只显示 4 或 3 个。

为什么以及如何解决？

【问题讨论】：

4、3、2..在这些li中，有分隔符。
是的，但是分隔符应该在每个 li 元素之后，而不仅仅是在其中一些之后

标签： html css twitter-bootstrap background-image nav

【解决方案1】：

好的，这是一个有效的修复，宽度已更改为 1px 而不是自动：

.navbar-default li + li {
    background:url('http://nave.net23.net/buffer1.png') no-repeat top right;
    background-size: 1px 75%;
    background-position:right center;
    display: block;

}

【讨论】：

谢谢，但是对我不起作用，你能添加一个固定的例子吗？
谢谢，你知道为什么会这样吗？宽度auto和1px不一样？
不知道为什么，似乎是渲染中的一些舍入错误或边缘情况。就个人而言，我会使用另一种方法而不是图像作为分隔符。例如：w3schools.com/css/css3_gradients.asp

【解决方案2】：

使用这个css

.navbar .nav > li {
    float: right;
    display: inline-block;
    width: auto;
    text-align: center;
    direction: rtl;
    width: 14.28%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 14px;
    font-weight: bold;
 }

这也适用于 ie 和 ff。

【讨论】：

【解决方案3】：

更改 CSS 的这一部分，它是由于 .active、.dropdown 类上的背景颜色而发生的

.navbar-default .navbar-nav>li + li {
    background:url('http://nave.net23.net/buffer1.png') no-repeat !important;
    background-size: auto 75%;
    background-position:right center!important;
    display: block;

}

如果您将 !important 添加到图像及其位置，它也会在其他浏览器上修复它

【讨论】：

我们不应该使用 !important。它也会影响这些元素在其他领域的使用。
不推荐广泛使用，但是，如果你用尽了方法，你可以！而且您显然可以使用自定义类来防止它对其他元素的影响！
意味着我应该检查它影响的地方，然后必须在哪里使用自定义类？我不是说它错了，而是一种不好的做法..
我说，我们可以为这个导航栏使用一个自定义类——所以，只有这个特定的导航栏会得到这个 !important 属性，如果有多个导航栏，它们不会受到影响！