奇怪的线Safari 6梯度

2013-07-10 84 views 0 likes

代码：

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%); 
}

它工作在27铬细，FF 22，但在Safari 6我在中间奇怪的线条。

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

还找到-webkit-mask-image，但不确定，它会帮助。

Fiddle

任何想法？

screenshot with strange lines

来源

2013-07-10 havenchyk

一个的jsfiddle将是很好？ – Harshad

请小提琴我没有看到什么.. –

http://jsfiddle.net/Xj2Du/ – havenchyk

回答

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

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

http://jsfiddle.net/82D7g/

您可以使用微软的SVG梯度发生器，如果你想调整的梯度：http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/

来源

2013-07-10 14:15:39 Duopixel

谢谢，Duopixel。但是你能解释一下，它是否是bug？为什么会发生？什么方法更好：1px宽度png图像的梯度或svg像你的答案？ – havenchyk

奇怪的线Safari 6梯度

回答

相关问题