Question

我安装了自适应主题，我使用Fire Fox的FireBug来改变我网站某些部分的颜色，一切都在Firefox上完美运行。但是第二次我看看谷歌浏览器，互联网浏览器和我的手机它看起来很可怕。它主要是标题小部件标签，因为它们不应该是红色的。我认为这是不是没有影响（这是不影响的背景）？：

#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

为所有其他浏览器添加线性渐变

#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 2

-moz令人惊讶的是只在mozilla中运行。如果为每个其他浏览器都包含渐变，它将在其他所有浏览器中使用。

我总是使用http://www.colorzilla.com/gradient-editor/来创建代码，所以我不会忘记一些事情。

一些Css样式表选择器仅在我的响应主题上对Firefox生效

2 个答案: