Firefox 和 Internet Explorer 下面的 CSS 代码不起作用。我如何解决它？

Posted 2023-02-22

【中文标题】Firefox 和 Internet Explorer 下面的 CSS 代码不起作用。我如何解决它？

【英文标题】：the CSS code below firefox and internet explorer does not work. How do I fix it?

【发布时间】：2014-11-26 15:08:28

【问题描述】：

Firefox 和 Internet Explorer 下面的 CSS 代码不起作用。我如何解决它 ？

谢谢。

body 
    background:white;

.slider-text 
    color:#999;
    font-size:24px;
    font-weight:normal;
    font-family:"Helvetica Neue", Helvetica, sans-serif;
    letter-spacing:-1px;
    width:360px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #999), color-stop(0.750, #999), color-stop(0.875, red), color-stop(1, #999));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: glint 5.5s infinite;

@-webkit-keyframes glint 
    0% 
        background-position: 0 0;
    
    100% 
        background-position: 360px 0;
    

<div class="slider-text">Continue the Tour</div>

【参考方案1】：

您正在使用 1 个值和 3 个属性，供应商前缀为 -webkit-：-webkit-gradient、-webkit-background-clip、-webkit-text-fill-color 和 -webkit-animation 由 Apple Safari、Google Chrome 和 Opera 15+ 用于 some 属性和 some 值的 WebKit 渲染引擎使用。

首先，检查 MDN（Mozilla 开发者网络）上的每个属性，它有一个非常好的文档。只需在 DuckDuckGo 或 Google 或其他搜索引擎上搜索“mdn gradient”（不用破折号，也不要忘记前缀）。 在那里，您将了解它的用途、它的允许值以及每页末尾的兼容性表。如果某个属性在 Firefox 4 之前需要 -moz- 前缀，那就忘了它吧，它现在没用了。如果它是 IE9 上的 -ms-，那么您可能仍然需要它，等等

仔细检查这个伟大的资源：caniuse（有一个“显示所有版本”按钮通常很有用）

您必须知道要与哪些浏览器兼容（IE8 与否等）以及浏览器我的意思是版本号；）以及它应该如何在其他浏览器上降级......

既然您知道需要哪个前缀，您可以写下如下内容：

* 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box; /* protip: always write the unprefixed one in last position */


.rounded 
 border-radius: 4px; /* no prefix, webkit and Firefox haven't needed them for ages. Used to but not nowadays */

一旦你了解了需要什么并练习了几个星期，你就可以使用像 Autoprefixer 这样的工具（节点插件、grunt、gulp，在 CSS 后处理器 Pleeease 等其他工具中）

【参考方案2】：

您使用的是 Chrome 属性 -webkit，请尝试查找这些属性的 Firefox 和 IE 等效项。

【讨论】：

-webkit-gradient 肯定有一个 Firefox 等效项：w3schools.com/css/css3_gradients.asp，你可以在那里看到。虽然不知道动画。

-webkit 是驱动 Safari 的引擎。 Chrome 和 Opera 现在使用 webkit 的一个分支，称为 blink。无论哪种方式，它都不是 Chrome 特有的属性。

我只想做一个在所有浏览器中工作的例子。像这样的东西：jsfiddle.net/7nspy27m（歌剧效果很好。）