2013-03-28 51 views
0

我試圖找出爲什麼沒有在Safari瀏覽器或IECSS規則沒有在Safari中被應用,但確定在Firefox

.navbar-inner { 
    min-height: 40px; 
    padding-right: 20px; 
    padding-left: 20px; 
    background-color: #333333 !important; 
    background-image: linear-gradient(to bottom, rgb(74, 74, 74), rgb(54, 54, 54)) !important; 
    background-repeat: repeat-x; 
    border: 1px solid rgb(212, 212, 212); 
    border-radius: 4px 4px 4px 4px; 
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067); 
} 

基本上被應用於此規則,我試圖改寫背景導航欄中的導航欄顏色。正如你所看到的,我添加了!important關鍵字,只是爲了測試CSS特殊性問題。這仍然不能解決問題。 你能給我任何解決這個問題的建議嗎?它在Firefox中正常工作.... 我只是在Chrome中測試。

謝謝。

回答

3

不同的瀏覽器使用不同的漸變屬性。 This是一個非常好的工具來生成它們。

爲此,您可以使用:

.navbar-inner { 
    background: rgb(74,74,74); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgb(74,74,74) 1%, rgb(54,54,54) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(74,74,74)), color-stop(100%,rgb(54,54,54))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a4a4a', endColorstr='#363636',GradientType=0); /* IE6-9 */ 
} 

!important試圖重寫引導默認樣式時,不應是必要的。只要確保您的自定義樣式在之前添加到頁面

相關問題