2012-02-14 70 views
3

我正在使用Compass生成线性渐变,但我收到一个奇怪的错误,指示Safari(版本5.1.2 [6534.52.7])为试图加载供应商前缀行,就好像它是一个URI。奇怪的!-webkit-linear-gradient在Safari中导致400(错误请求)错误

指南针代码: 体{ @include背景图像(线性梯度(顶,#F7F7F7 0%,#FFFFFF 20%,#CCCCCC 57%,#DDDDDD 60%,#F1F1F1 80% ,#FFFFFF 100%)); }

生成CSS:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(20%, #ffffff), color-stop(57%, #cccccc), color-stop(60%, #dddddd), color-stop(80%, #f1f1f1), color-stop(100%, #ffffff)); 
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%); 
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%); 
background-image: -o-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%); 
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%); 
background-image: linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%); 

错误:-webkit线性梯度

-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%) 
GET http://localhost:8888/-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%) 400 (Bad Request) 

错误:-webkit梯度()

-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255))) 
GET http://localhost:8888/-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255))) 400 (Bad Request) 

尽管出现此错误,渐变渲染正确。在整个页面中还有许多其他多停止线性渐变,不会导致错误。看起来,这是一个Safari错误 - 只有在使用渐变时才会发生。看看一些代码(请参阅如果你正在运行的Safari错误住):

  1. With error (gradient in Body Tag)
  2. No error (same gradient elsewhere)

任何想法/解决方案将不胜感激。

+0

我在Safari 5.1.3版本中看不到错误(7534.53.10) – maxbeatty 2012-02-14 18:57:01

回答

2

感谢@maxbeatty在您的Safari版本上进行检查。您的文章让我深入挖掘,并禁用所有插件。我发现罪魁祸首是Safari AdBlock Plugin。禁用它会导致错误消失。

+0

这一直是我最长时间的烦恼,谢谢。 – 2012-03-27 15:29:02