奇怪的线条野生动物园6级渐变

Question

我正在尝试为该块制作渐变。

代码：

a {
      display: inline-block;
      box-sizing: border-box;
      width: 330px;
      height: 160px
      background: -moz-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: -webkit-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: linear-gradient(to bottom, #fdfdfd 0%,#fcfcfc 100%);
}

它在chrome 27，ff 22中运行良好，但在safari 6中我在中间有奇怪的线条。

我知道，Safari只支持-webkit-linear-gradient，但它对我来说很奇怪。

同时找到-webkit-mask-image，但不确定，它会有所帮助。

Fiddle

有什么想法吗？

Answer 1

Safari和旧版本的Chrome在显示颜色非常相似的渐变时出现问题，我建议切换到SVG渐变。您在此过程中获得了IE 9支持。不幸的是，语法不是很好：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkRGREZEIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkNGQ0ZDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzYpIiAvPgo8L3N2Zz4=);

http://jsfiddle.net/82D7g/

如果要调整渐变，可以使用Microsoft的SVG渐变生成器：http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/