Question

我几乎已经完成了我的网站，但现在我正在检查浏览器的兼容性并且在Safari上遇到了一些问题。我解决了其中一些，但这不可能。

我使用此代码为我的textarea添加背景

background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#126d82 .1em, transparent .1em);
background-image: -webkit-linear-gradient(90deg, transparent 79px, #126d82 79px, #126d82 81px, transparent 81px),
-webkit-linear-gradient(#126d82 .1em, transparent .1em);
background-size: 100% 2em;
background-position: 30px 31px;

除了Safari之外，这一切都符合我的预期。我尝试了-webkit-linear-gradient，但没有帮助。

我可以做些什么来完成这项工作？

谢谢。

这是我网站的链接，因此您可以看到差异http://motiongiraffx.com/

Answer 1

Safari 5.1.7很老了。（当前版本是8.0.7。）我不确定Safari版本如何与WebKit版本同步，但原始Safari支持使用了linear-gradient的不同语法：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

MDN有更多信息。

Answer 2

那么，5.1.7。是野生动物园的旧版本，这就是为什么它不起作用（见caniuse.com）。

使用linear-gradient时的最佳方法是使用一些在线生成器，例如colorzilla，它可以为您完成所有工作，并牢记旧浏览器。

请参阅apple documentation：

注意：W3C提案的最新草案简化了语法。本章介绍Safari中最新的实施方法。随着W3C标准的发展，你应该期望Safari的渐变语法能够继续改变。虽然需要新语法，但现有的语法和先前语法仍应有效。

-webkit-linear-gradient和webkit-radial-gradient属性需要iOS 5.0或更高版本，或桌面上的 Safari 5.1或更高版本。如果您需要支持早期版本的iOS或Safari，请参阅先前语法（-webkit-gradient）。

Answer 3

尝试：

background-image: linear-gradient(to bottom, #color1, #color2);

Answer 4

尝试从-linear的两个实例中删除-webkit-linear-gradient。随着这一变化，我在Safari和Chrome中都获得了“笔记本”效果。

Answer 5

为了减少所有供应商前缀（并使整个生活更轻松），您可以使用SASS和Bourbon。一旦您使用了一些可用的包含，供应商前缀就会自动发生，并有助于解决许多特定于浏览器的问题。

例如：

@include background(linear-gradient(red, green) left repeat);

线性渐变在Safari中不起作用

5 个答案: