Question

在网站（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>

Answer 1

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

您使用的!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);

Firefox上写道：

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

Working Example

CSS3过渡在firefox中不起作用

1 个答案: