2013-09-30 3 views
2

웹 사이트 (www.kkbio.co.uk)에서 탐색 모음을 수정하고 CSS3 전환으로 로고가 더 작은 버전으로 변경되는 스크립트를 만들었습니다. Google 크롬에서 작동하지만 파이어 폭스에서는 그렇지 않습니다. 다른 전환도 효과가 없습니다. 나는 나를 예를 들어CSS3 전환이 파이어 폭스에서 작동하지 않습니다.

:) 제발 도와주세요) 이유를 모르는 : 당신은 !important을 사용했습니다

여기에 몇 가지 문제를 가지고 마치
.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> 
+0

환영 SO합니다. 스크립트를 여기에 게시하십시오. 문제를 더 빨리 해결할 수 있도록 도와주는 것이 좋습니다. – Nogard

답변

3

...

하는 거의 항상 나쁜 징조이며 동일한 요소에 두 번 사용 했으므로 어느 규칙이 이 더!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 같은 shorthands를 사용하는 경우 파이어 폭스가 기본 값을 입력합니다 :

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

파이어 폭스 읽

Working Example

+0

답변 해 주셔서 감사합니다. 나는 모든 실수를 개선했다. 하지만 어쨌든 작동하지 않습니다. 어쩌면 나는 잘못한거야?) –

+0

@ swat-web 나는 예제를 추가했다. 당신을 올바른 길로 인도하는 데 도움이 될 것입니다. – apaul

관련 문제