为什么Firefox 16会改变线性渐变的方向?

ch7*_*527 12 css firefox css3

CSS示例:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: linear-gradient(90deg, #e8f0ff, #ffffff);
Run Code Online (Sandbox Code Playgroud)

这通常会导致从#e8f0ff底部到#fff顶部的线性渐变.

在Firefox 16之后(几天前发布),渐变现在从#e8f0ff左边到#fff右边.

当我删除特定于供应商的CSS并且只留下:

background-image: linear-gradient(90deg, #e8f0ff, #ffffff);
Run Code Online (Sandbox Code Playgroud)

什么都没发生.但是,当我删除该行并只留下特定于供应商的样式时:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);
Run Code Online (Sandbox Code Playgroud)

它纠正了这个问题.

那么FF16的新功能在这里发生了什么?是Xdeg从一个新的方向的初始值,都被只在某些情况下,加在一起?我无法弄清楚为什么它会180deg与两者或只与一般,但只有90deg它只是供应商.

问题是,这种来自Firefox的新行为的具体细节是什么?对于那些现在在FF16中出现错误方式的网站,最广泛,最符合标准的解决方案是什么?

Ry-*_*Ry- 13

该标准规定从0°=向上顺时针测量角度.

使用角度

出于此参数的目的,'0deg'指向上方,正角度表示顺时针旋转,因此'90deg'指向右侧的[sic].

-moz-linear-gradient另一方面,使用极坐标(强调我的):

在前缀变体和未加前缀的提议之间仍然存在最后的语义好奇心.在最初的Apple提议之后,语法的前缀变体都使用了<angle>定义的类似极角,即0deg代表东方.为了与CSS的其余部分保持一致,规范定义了一个角度,其中0deg代表North.为了防止使用属性的前缀版本的网站突然中断,即使在适应其他前向兼容的最终语法时,它们仍保持原始角度定义(0deg = East).在取消固定属性时,它们将切换到正确的规范.此外,由于它们不兼容,Gecko支持前缀,带有to关键字和无关的语法.同样,在无法修复时,将删除不带关键字的语法.

  • 这将教会那些讨厌的Web作者不要盲目地复制和粘贴前缀声明; 说到这一点,如果你正在使用[-prefix-free](http://leaverou.github.com/prefixfree),请注意它会优雅地为你处理所有这些差异,只要你使用标准化的渐变语法(并保持脚本最新!) - http://lea.verou.me/2012/07/important-prefix-free-update (3认同)