Html safari和firefox与chrome-css渐变

我遇到了一个特殊的情况，chrome与safari+firefox在渲染渐变的方式上有很大的不同

注意：

我认为chrome one是正确的版本，我如何让safari+ff以同样的方式运行

左游猎，右铬

---

简单的回答是，你没有

很长的答案是，对于如何从起点梯度值到终点梯度值，没有特定的方法。硬件加速会将此传递给任何图形卡的渲染引擎，但供应商处理此问题的方式因渲染引擎而异，就像没有硬件渐变填充将留给各个浏览器引擎一样

如果你真的需要它们尽可能地靠近（注意我没有说完全相同），那么你就必须使用一个过大的图像作为背景，并调整其位置以适应可用区域。所有这些都意味着在不同的屏幕尺寸下，结果略有不同

当然，有些浏览器根本不会渲染渐变

如果你真的想，你可以尝试改变起始值、值和百分比，但这是一个很大的工作，效果取决于你的用户监视器有多好，所以不是很有用

所以在现实中，这对用户（而不是你）真的很重要。如果它们确实在浏览器之间切换（为什么会切换），并且在特定浏览器上使用时始终保持一致，那么它们看起来会非常相似（甚至很接近）。不同浏览器之间的字体呈现方式不同标记的呈现方式在不同操作系统/平台上的相同浏览器之间存在差异

重要的是不要在每个平台/操作系统/浏览器上都使用相同的像素，因为这是不可能的。而是让你的用户清楚、一致地访问他们需要的信息

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(56,56,56,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#383838',GradientType=0 ); /* IE6-9 */