2

在网站（www.kkbio.co.uk）中，我创建了一个脚本，将导航栏固定在顶部，并且徽标通过 CSS3 转换更改为较小的版本。它在谷歌浏览器中工作，但在 Firefox 中却不是。其他过渡也不起作用。我不知道为什么）请帮助我:)

例如：

.navbar-brand {
    margin-right: 0px;
    padding: 0;
    width: 342px;
    height: 82px;
    margin-left: 15p‌​x;
    margin-top: 15px;
    -moz-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -webkit-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -o-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
}

.fixed .navbar-brand {
    height: 74px;
    margin-top: -5px;
    background-position: 0 -82px!important;
}

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>
4

1 回答 1

3

看起来你在这里遇到了一些问题......

你已经使用!important了几乎总是一个不好的迹象，并且你已经在同一个元素上使用了两次，那么哪个规则更多 !important？

!important尽可能避免使用。在这种情况下，您可以使用以下方法避免它：

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

而不是：

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

如果您像background这样使用速记，Firefox 将填写默认值，而 Chrome 读取：

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);

火狐阅读：

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png) repeat scroll 0% 0% transparent;

工作示例

于 2013-09-30T15:55:27.840 回答