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

Posted 2023-05-07

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

【英文标题】：Some Css style sheet selectors ONLY taking effect on Firefox on my responsive theme

【发布时间】：2013-12-13 12:04:11

【问题描述】：

我安装了一个响应式主题，我使用了 fire fox 的 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;

我不明白为什么这不起作用？我还查看了我的主题的原始样式表，但找不到任何东西可以指出我添加到我的子主题的正确方向？

【问题讨论】：

这是 Firefox，不是 FireFox :-)

【参考方案1】：

-moz 令人惊讶地只在 Mozilla 中工作。如果您为每个其他浏览器包含渐变，它将适用于所有其他浏览器。

我总是使用http://www.colorzilla.com/gradient-editor/ 来创建代码，这样我就不会忘记一些东西。

【讨论】：

哇，非常感谢您的回答，我的下一个问题是关于以下内容：1.) 这段代码看起来像这样吗？ 2.) 如果是这样，这是否意味着每次我向子主题的选择器添加背景时，我都应该去 colorzilla 并为每个选择器背景添加漂亮的额外 css 块，这样我就可以覆盖所有浏览器？这是正确的方法吗？我所指的新代码，我粘贴在下面作为答案

【参考方案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;