CSS 不适用于 Chrome，但适用于 Firefox 和 IE答案

【问题标题】：CSS not working on Chrome but works on Firefox and IECSS 不适用于 Chrome，但适用于 Firefox 和 IE
【发布时间】：2014-08-19 06:03:48
【问题描述】：

http://foodstylingmentor.com

这是一个 WordPress 网站。您可以在“关于我”菜单项下看到子菜单项。 Firefox 和 IE 遵循 CSS，但 Chrome 不遵循。我已清除所有浏览器的缓存和历史记录。

@media screen and (min-width: 600px) {

    .main-navigation li ul li a:hover {
    background: #efefef !important;
    color: #7b0309 !important;
    }    
}

我也尝试删除@media 等，但仍然无法正常工作。

我已经搜索并尝试找到解决方案。但是失败了。所以如果有人可以帮助我，请这样做。

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布 Short, Self Contained, Correct Example (SSCCE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
一些屏幕截图也会有所帮助。不要指望这里的人安装了 3 个浏览器，即使他们安装了：我们需要做的工作越少，您获得快速和好的答案的机会就越大。

标签： css wordpress google-chrome

【解决方案1】：

这是因为您将背景设置为background: #efefef;

在.main-navigation li ul li a 类中添加：

background: -webkit-linear-gradient(#f7eabf, #936d28, #f7eabf, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

并且文本应该像父文本一样显示。添加上述内容将导致出现灰色（ish）颜色：

.main-navigation li ul li a:hover 
{
    background: #efefef !important;
    color: #7b0309 !important;
}

【讨论】：

我试过了，但效果不如 Firefox。