为什么Firefox 16改变了我的线性渐变方向



示例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);

这曾经导致从底部的#e8f0ff到顶部的#fff的线性梯度。

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

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

background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

什么也没发生。但当我删除那一行,只留下供应商特定的样式时:

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

它纠正了问题。

那么,这里发生了什么,这是FF16的新内容?Xdeg值是否从一个新的方向开始,是否仅在某些情况下才添加在一起?我不明白为什么它会同时使用180deg,或者只使用general,但如果它是唯一的供应商,就只使用90deg

问题是,Firefox的这种新行为的具体内容是什么,对于现在在FF16中梯度出错的网站来说,最广泛、最符合标准的解决方案是什么?

标准规定从0°=开始顺时针测量角度向上的

使用角度

就本参数而言,"0deg"指向上方,正角度表示顺时针旋转,因此"90deg"指向[sic]右边。

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

在带前缀的变体和不带前缀的提议之间仍然存在最后一个语义好奇心。根据苹果最初的提议,该语法的前缀变体都使用了像极角一样定义的<angle>,即0deg代表东方。为了与CSS的其余部分保持一致,规范定义了一个角度,0deg表示北方为了防止使用前缀版本属性的站点突然中断,即使在适应其他前向兼容的最终语法时,它们也会保留原始角度定义(0deg=East)。在取消固定属性时,它们将切换到正确的等级库此外,由于它们并不兼容,Gecko支持带前缀的to关键字和不带前缀的语法。在这里,不带关键字的语法将在取消固定时被删除。

一个简单的破解方法是使用关键字bottom而不是度。

最新更新