一些Css樣式表選擇器只在我的響應式主題上生效Firefox

Question

我安裝了一個響應式主題，我使用FireFox的FireBug來更改我的網站某些部分的顏色，並且所有功能都可以在Firefox上正常工作。但第二次看到谷歌瀏覽器，Internet Explorer和我的手機它看起來非常可怕。大多數情況下，它是頭部小部件標籤，因爲它們不應該是紅色的。 這我覺得是什麼沒有影響（這是背景沒有影響）？ ：

#secondary .widget_fearless_tabs .headings a { 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) repeat scroll 0 0 #333333 !important; 
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important; 
    border-right: 1px solid rgba(0, 0, 0, 0.5) !important; 
    color: #CCCCCC !important; 
    display: block !important; 
    font-size: 1.3rem !important; 
    margin: 0; 
    outline: 0 none; 
    padding: 0.9em 0; 
    text-align: center; 
} 

button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover { 
    background: -moz-linear-gradient(center top, #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important; 
    border: 1px solid #E0E0E0 !important; 
    border-radius: 1px !important; 
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important; 
    color: #182945 !important; 
} 

/* This changes colors of hover secondary widget headings like review widget */ 
#secondary .widget_fearless_tabs .headings a:hover { 
    background: -moz-linear-gradient(center top, #FFFFFF, #F6F6F6) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important; 
    border: 1px solid #E0E0E0 !important; 
    border-radius: 1px !important; 
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important; 
    color: #40516D !important; 
} 

我不明白爲什麼這不起作用？我也看過我的主題的原始樣式表，找不到任何東西指向正確的方向添加到我的孩子主題？

Answer 1

-moz只是在Mozilla工作出奇。如果您爲每個其他瀏覽器都包含漸變效果，它將適用於所有其他瀏覽器。

我總是使用http://www.colorzilla.com/gradient-editor/來創建代碼，所以我不會忘記一些東西。

Answer 2

添加線性梯度爲所有其他瀏覽器也

#secondary .widget_fearless_tabs .headings a:hover { 
background: -moz-linear-gradient(center top , #FFFFFF, #F6F6F6) repeat scroll 0 0  padding-box rgba(0, 0, 0, 0) !important; 

//所有其​​他瀏覽器

background: -o-linear-gradient(center top , #FFFFFF, #F6F6F6) repeat scroll 0 0  padding-box rgba(0, 0, 0, 0) !important; 
border: 1px solid #E0E0E0 !important; 
border-radius: 1px !important; 
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important; 
color: #40516D !important; 
} 

Answer 3

非常感謝你的回答，我的下一個問題是關於以下幾點：1.）這段代碼是否看起來像這樣？ 2.），如果是這樣，這是否意味着每次我添加背景到我的孩子主題上的選擇器時，我應該去colorzilla並將每個選擇器背景添加那個漂亮的額外css塊，以便覆蓋所有瀏覽器？這是正確的方式嗎？新的代碼我指的是：

.button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover { 

background: -moz-linear-gradient(center top , #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important; 
background: #fefefe; /* Old browsers */ 
background: -moz-linear-gradient(top, #fefefe 23%, #f4f4f4 66%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color- stop(23%,#fefefe), color-stop(66%,#f4f4f4)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #fefefe 23%,#f4f4f4 66%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fefefe 23%,#f4f4f4 66%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fefefe 23%,#f4f4f4 66%); /* IE10+ */ 
background: linear-gradient(to bottom, #fefefe 23%,#f4f4f4 66%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',  endColorstr='#f4f4f4',GradientType=0); /* IE6-9 */ 
border: 1px solid #E0E0E0 !important; 
    border-radius: 1px !important; 
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important; 
    color: #182945 !important; 

}