Jquery 渐变文本交叉浏览器

我想做一个水平渐变的菜单栏。我在使用

-webkit背景剪辑时取得了一些成功，但这在Firefox中不起作用

我找到了一个跨浏览器兼容的jQuery插件pxgradient，但我无法让它跨越几个
li
元素。请参阅以下JSFIDLE：


我希望梯度更像顶部的梯度。理想情况下，我希望边界底部包含相同的悬停梯度，但我可能生活在一个没有这个梯度的世界里

PS-
font-awesome
图标之所以出现，只是因为它在前面给了我一些问题，所以我现在就加入了它，以确保它能正常工作

更新：
我玩的另一个可能的想法是读取元素的数量，然后划分每个元素的颜色，并使用第n-child（）选择器分配每个颜色

<script>
//Get number of list items
var menuItems = $("li").children().length;

//Convert colors to hex
hexString1 = '2850FF';
hexString2 = 'FF0066';
color1 = parseInt(hexString1, 16);
color2 = parseInt(hexString2, 16);

//Calculate difference in colors and color step
colorDifference = color2 - color1;
colorStep = colorDifference / (menuItems - 1);
colorStep = parseInt(colorStep);

//Loop through elements and apply gradients
for (i = 0; i < menuItems; i++) {
    newColor1 = color1 + (i * colorStep);
    newColor2 = color1 color2 -1;
    gradientStart = newColor1.toString(16);
    gradientEnd = newColor2.toString(16);

    //use gradientStart and gradientEnd as colors in the function, not sure on this part yet

}

</script>


//获取列表项的数量
var menuItems=$（“li”）.children（）.length；
//将颜色转换为十六进制
hexString1='2850FF'；
hexString2='FF0066'；
color1=parseInt（hexString1,16）；
color2=parseInt（hexString2,16）；
//计算颜色差异和颜色步长
色差=色差2-色差1；
colorStep=色差/（菜单项-1）；
colorStep=parseInt（colorStep）；
//在元素中循环并应用渐变
对于（i=0；i

这似乎太过分了，一定有更简单的解决办法吗？此外，与只有几个字符的元素相比，具有许多字符的元素将具有相对缓慢的渐变。这可能通过计算每个元素的字符数来解决，但这一切似乎都相当低效
 一个简单的解决方案，可以在FF、Chrome和Safari中使用混合模式

诀窍在于，在ul中，梯度设置在a下

设置混合模式：屏幕，此颜色将仅显示在黑色区域（文本和悬停时的边框）


ul{
显示：内联块；
填充：0；
字体大小：30px；
字体大小：粗体；
背景：线性梯度（90度，红色，蓝色）；
}
李{
混合模式：屏幕；
背景色：白色；
盒影：8px 0px 0px白色；
}
李，李a{
显示：内联块；
文字装饰：无；
底部边框：3倍纯白；
}
李：停一停{
底部边框：3倍纯黑；
文本阴影：0px 0px 2px灰色；
}








Hmm在摆弄你的小提琴时，我从链接中删除了HREF属性，使文本看起来像你想要的，但当我尝试在pxgradiant调用后插入URL时，它不起作用。如果你想找一份工作或其他方式，我会让你知道的。谢谢你的关注。我有一个不同的想法，但我如何才能回答我自己的问题与常规编辑？长期阅读stackoverlow，第一次海报。@Robert如果你需要澄清什么，请编辑你的问题。编辑“按钮”位于标签下面，如果你找不到它。不可能！我对像你这样的简单解决方案已经放弃了希望。
<script>
//Get number of list items
var menuItems = $("li").children().length;

//Convert colors to hex
hexString1 = '2850FF';
hexString2 = 'FF0066';
color1 = parseInt(hexString1, 16);
color2 = parseInt(hexString2, 16);

//Calculate difference in colors and color step
colorDifference = color2 - color1;
colorStep = colorDifference / (menuItems - 1);
colorStep = parseInt(colorStep);

//Loop through elements and apply gradients
for (i = 0; i < menuItems; i++) {
    newColor1 = color1 + (i * colorStep);
    newColor2 = color1 color2 -1;
    gradientStart = newColor1.toString(16);
    gradientEnd = newColor2.toString(16);

    //use gradientStart and gradientEnd as colors in the function, not sure on this part yet

}

</script>