Internet Explorer 9 中的渐变答案

【问题标题】：Gradients in Internet Explorer 9Internet Explorer 9 中的渐变
【发布时间】：2011-04-25 11:35:42
【问题描述】：

有谁知道 IE9 中渐变的供应商前缀，还是我们仍然应该使用他们的专有过滤器？

我对其他浏览器的了解是：

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

还有人知道 Opera 的供应商前缀吗？

【问题讨论】：

即使我选择了一个答案 - 这仅在此时相关。如果这种情况发生变化，有人可以更新线程吗？非常感谢。
完全。我怀疑 IE 9 现在是否会实现渐变，因为它处于测试阶段。
IE9 不支持渐变，但 IE10 支持。
IE 只是一个糟糕的浏览器，不支持内联块，位置值无故中断，不支持渐变，慢得要命......让我们开始警告用户他们需要停止使用 IE 而不是浪费我们的时间来支持次标准的浏览器。就我个人而言，多年来我一直完全阻止 IE 用户查看我的任何页面（指导他们获得真正的浏览器），而且我从未失去过一次销售。做一些研究，你会发现 IE 占所有互联网流量的
Dan，我很想知道你的数字来自哪里，我找不到单一来源说明 IE 占流量的

标签： css background internet-explorer-9 gradient

【解决方案1】：

看来我参加聚会有点晚了，但这里有一些顶级浏览器的示例：

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

来源：http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

注意：所有这些浏览器还支持 rgb/rgba 代替十六进制表示法。

【讨论】：

我还不认为 IE10 是主流浏览器。
@DavidMurdoch 这在技术上是正确的，但是不将专有扩展添加到您的 CSS 是没有意义的，因为我们知道它将是什么。毕竟IE10注定要成为主流浏览器。
@Robotsushi 虽然它没有回答 IE9 的问题（选择的答案可以，这可能就是选择它的原因），但这个问题位于“Internet Explorer css”的 Google 结果的第一页渐变”，因此现在 IE10 几乎已为 Windows 7 做好了准备，因此在这里提供一些有用的东西没有任何害处。
最新版本的 Firefox 和 Opera 支持 W3C 标准。（我在 Windows 7 上测试了 Firefox 19 和 Opera 12.14）
由于这是针对 IE9 的问题的最高投票答案，因此它应该在末尾添加过滤器：以便它包含 IE9 支持。

【解决方案2】：

最好的跨浏览器解决方案是

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

【讨论】：

【解决方案3】：

从 IE9 beta 1 开始，您仍然需要使用他们的专有过滤器。

【讨论】：

根据css3please.com 的说法，IE10 看起来应该支持 CSS 渐变，这是个好消息...
css3please.com 帮助我找到了解决方案。谢谢

【解决方案4】：

IE9 目前缺乏 CSS3 渐变支持。但是，这里有一个很好的解决方案，使用 PHP 来返回 SVG（垂直线性）渐变，这使我们可以将设计保留在样式表中。

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

只需将其上传到您的服务器并像这样调用 URL：

gradient.php?from=f00&to=00f

这可以与您的 CSS3 渐变结合使用，如下所示：

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

如果您需要定位到 IE9 以下，您仍然可以使用旧的专有“过滤器”方法：

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

当然，您可以修改 PHP 代码以在渐变上添加更多停止点，或者使其更复杂（径向渐变、透明度等），但这对于那些简单的（垂直）线性渐变非常有用。

【讨论】：

优雅的解决方案。仅供参考：我刚刚确认不为支持linear-gradient的浏览器下载了SVG。
我想知道是否有办法在创建这些 svg 文件后对其进行缓存。
一个更可靠的问题是找出请求缓存文件与每次生成文件流在时间和服务器负载方面的性能。
PHP 不应该在您的 UI 设计中拥有知识或帮助。把客户的需求放在客户身上。

【解决方案5】：

我用于所有浏览器渐变的代码：

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

您需要指定高度或zoom: 1 以将hasLayout 应用于元素，以便在IE 中工作。

更新：

这是为所有 LESS 用户准备的 LESS Mixin (CSS) 版本：

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

【讨论】：

作为 LESS 用户，我一直在寻找一种让渐变在 IE9 中也能正常工作的方法。我找到了一篇详细介绍如何生成 SVG 的博客文章：blog.philipbrown.id.au/2012/09/…

【解决方案6】：

Opera 将很快开始提供支持渐变以及其他 CSS 功能的构建。

W3C CSS 工作组甚至还没有完成 CSS 2.1，你们都知道，对吧？我们打算很快完成。 CSS3 是精确模块化的，因此我们可以更快地将模块移动到实现而不是整个规范。

每个浏览器公司都使用不同的软件周期方法、测试等。所以这个过程需要时间。

我相信很多很多读者都知道，如果你在 CSS3 中使用任何东西，你就是在做所谓的“渐进式增强”——支持最多的浏览器会获得最好的体验。另一部分是“优雅降级”，这意味着在浏览器实现模块或与您想要做的事情相关的模块部分之前，体验将是令人愉快的，但可能不是最好的或最具吸引力的。

这造成了一种非常奇怪的情况，不幸的是前端开发人员因以下原因而感到非常沮丧：实现时间不一致。所以这对任何一方来说都是一个真正的挑战——你是责怪浏览器公司、W3C，还是更糟——你自己（天知道我们不可能全都知道！）我们这些为浏览器公司和 W3C 小组工作的人呢？会员自责？你？

当然不是。这始终是一场平衡游戏，到目前为止，作为一个行业，我们还没有弄清楚平衡点到底在哪里。这就是从事进化技术工作的乐趣:)

【讨论】：

【解决方案7】：

我知道 IE9 仍然不支持 CSS 渐变。真可惜，因为它支持大量其他很棒的新东西。

您可能希望查看CSS3Pie 以让所有版本的 IE 都支持各种 CSS3 功能（包括渐变，但也包括边框半径和框阴影），并且最简单。

我相信 CSS3Pie 可以与 IE9 配合使用（我已经在预发布版本上尝试过，但在当前的 beta 版本上还没有尝试过）。

【讨论】：

谢谢斯普德利。我在 IE6 到 8 上使用 CSS3Pie，但我希望避免在 IE9 上使用它！我在 IE8 中使用我的 CSS3Pie 样式为每个 IE 提供了一个单独的样式表。只要渐变是我目前使用的 CSS3 中唯一缺少的东西，我会在不使用 CSS3Pie 的情况下为 IE9 添加另一个样式表，如果可以的话。
我什至没有看到这篇文章，我的错。刚刚写了一个答案并投票删除它并使用相同的信息。注意：警惕已知问题：css3pie.com/documentation/known-issues

【解决方案8】：

不确定 IE9，但 Opera 似乎还没有任何渐变支持：

http://www.opera.com/docs/specs/presto26/#css

该页面上没有出现“渐变”。

Robert Nyman 有一篇很棒的文章，关于让 CSS 渐变在所有非 Opera 浏览器中工作：

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

不确定是否可以扩展以使用图像作为后备。

【讨论】：

这让我很惊讶，因为 Opera 通常处于实施标准的最前沿。感谢保罗的回答。
我认为渐变尚未成为标准。据我了解，新的 CSS 功能倾向于在浏览器中实现，然后最终在标准中指定。我相信 WebKit 团队首先在 CSS 中实现了渐变（除非你算上微软和他们的 filter 东西，这在我的书中并不真正符合 CSS 的条件）。 Firefox 现在已经跟随他们了，但 W3C CSS 草案规范中似乎还没有任何内容：参见 google.co.uk/…

【解决方案9】：

从版本 11 开始，Opera 支持带有 -o- 供应商前缀的线性渐变。 Chris Mills 写了一篇关于它的 Dev.Opera 文章：http://dev.opera.com/articles/view/css3-linear-gradients/

径向渐变仍在开发中（无论是在规范中还是在 Opera 中）。

【讨论】：

【解决方案10】：

使用梯度生成器 - 一切都会完美；） http://www.colorzilla.com/gradient-editor/

【讨论】：