渐变 - 跨浏览器一致性答案

【问题标题】：Gradient - Cross Browser uniformity渐变 - 跨浏览器一致性
【发布时间】：2014-06-26 09:05:32
【问题描述】：

我正在测试所有浏览器的渐变兼容性，我发现渐变对 FireFox 有不同的影响。请允许我演示一下测试。

守则

<html>
    <head>
        <style type="text/css">
            body{
                background: -moz-linear-gradient(top left , white , black 25%);
                background: -o-linear-gradient(top left , white , black 25%);
                background: -webkit-linear-gradient(top left , white , black 25%);
                background: -khtml-linear-gradient(top left , white , black 25%);
                background: -ms-linear-gradient(top left , white , black 25%);
                background:  linear-gradient(top left , white , black 25%);
            }
        </style>
    </head>
    <body>
    </body>
</html>

结果：

谷歌浏览器 - 35.0

火狐 - 30.0

IE11

歌剧 22.0

Safari 5.1.7

正如您所见，在 Firefox 中渐变采用不同的形状。如何克服这个限制？

【问题讨论】：

也许可以尝试使用to bottom right 而不是top left
尝试生成colorzilla.com/gradient-editor
我知道很多生成器，但我想自己编写代码。因此测试。而 CSS3 Now 承诺跨浏览器的统一性和测试不同的说法。
@Genocide_Hoax：你能试试我更新的代码吗？让我知道你是否有任何疑问。
不敢相信你说的是错的，我刚刚尝试自己制作了一些演示，实际上它在 FF 30 上运行良好 jsfiddle.net/rNybk

标签： css cross-browser gradient

【解决方案1】：

实际上body 没有明确设置height，默认情况下它的边距大约是8px，所以它的高度大约是8px。在this demo 中，我们将background-repeat 设置为no-repeat，你会明白为什么默认情况下（repeat）它会呈现你所看到的。但是我不得不承认body 元素有一个特别之处。看起来background 仍然可以在外部渲染身体。您可以使用元素检查器查看主体的高度实际上大约是8px。但是背景仍然可以渲染出来。我们可以通过显式设置高度来解决这个问题：

body {
    /* ... */
    height:100vh;
}

或者：

body, html {
    height: 100%;
}

或者您也可以显式设置background-size：

body {
   /* ... */
   background-size:100vw 100vh;
}

【讨论】：

【解决方案2】：

使用这个。 http://jsfiddle.net/Vca7f/1/ 这也适用于 IE9。要生成更多渐变，您可以访问http://www.colorzilla.com/gradient-editor/，它是生成渐变的非常好的工具。

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

【讨论】：

在 FireFox 中的结果又不一样了。而且我不想生成渐变，我想自己编写代码。因此是测试。

【解决方案3】：

试试这个，对支持所有浏览器的你会有帮助：

CSS：

div{
    width:500px;
    height:200px;
    background:#000;
    background: -webkit-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Opera 11.10+ */
    background: -moz-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #fff), color-stop(36%, #000), color-stop(51%, #000), color-stop(71%, #000), color-stop(100%, #000));/* Chrome,Safari4+ */
    background: -ms-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* IE 10+ */
    background: linear-gradient(135deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000', GradientType=1 );/* IE6-9 fallback on horizontal gradient */

}

HTML：

<div></div>

IE9 支持：

通过 IE9（使用 SVG）支持完整的多级渐变。为所有具有渐变的元素添加一个“渐变”类，并将以下覆盖添加到您的 HTML 以完成 IE9 支持：

<!--[if gte IE 9]
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

Fiddle Demo

【讨论】：

使用-45deg 或135deg 完全是另一回事。尝试调整窗口大小，看看为什么会有所不同。
这个问题的动机不是如何实现渐变，我可以很容易地使用生成器来做到这一点，就像你做的那样。动机是行为背后的原因以及如何使用提供的相同 sn-p 来克服它。

【解决方案4】：

现有的答案，虽然在解决问题方面做得很好，但并没有解决实际问题，即：为什么不是所有的浏览器都对这个源有相同的行为？

答案是，Quirks 模式。不同的浏览器有不同的怪癖！
因此，使示例代码相同的方法是在顶部插入适当的 DOCTYPE 声明

<!DOCTYPE html>

以便文档以标准模式显示。然后差异就会消失；所有浏览器都会以 Firefox 现在的方式显示它。

【讨论】：