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

为什么以及如何解决？

Answer 1

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

.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元素的背景图像都会显示

3 个答案: