Question

我正在测试所有浏览器的渐变兼容性，我发现渐变对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 Google Chrome - Version 35.0.1916.153 m

FireFox - 30.0 FireFox - 30.0

IE11 IE 11

Opera 22.0

Safari 5.1.7

正如您所看到的，在Firefox的情况下，渐变采用不同的形状。如何克服这个限制？

Answer 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;
}

Answer 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=);

Answer 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

Answer 4

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

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

<!DOCTYPE html>

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

渐变 - 跨浏览器均匀性

4 个答案: