不是所有li元素的背景图都显示出来

Question

我有一个带有垂直分隔符的 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（所有版本）中只显示 4 或 3 个而不是 6 个垂直分隔符。

为什么以及如何解决？

Answer 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;

}

Answer 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。

Answer 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 添加到图像及其位置，它也会在其他浏览器上修复它

不是所有li元素的背景图都显示出来

Not all the background images of li elements are displayed

html

css

twitter-bootstrap

background-image

nav