-ms-filter 通过 jquery 在 IE8 中进行渐变答案

【问题标题】：-ms-filter for gradient in IE8 via jquery-ms-filter 通过 jquery 在 IE8 中进行渐变
【发布时间】：2013-01-17 08:22:20
【问题描述】：

我正在这个颜色控制面板上进行试验，用户可以使用控制面板中的幻灯片来更改页面的外观和感觉。一个额外的复杂性是滑入式面板位于父窗口中，而进行更改的页面位于 iframe 内。我希望更改生效，因为它们是在控制面板中进行的。为此，我不想使用 AJAX。为此，我设计了一个算法，它运行良好。

除了 IE8 的问题外，一切正常。加载页面时，我在 css 中默认使用此样式定义。

（感谢 Louis Lazaris - http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/）

background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

现在这就是我尝试在 javascript 中使用 jQuery 做的事情（hex1 和 hex2 是两个变量，包含两个用于渐变的十六进制值）：

jQuery('#iframeId').contents().find('.gradient').css(
{
        backgroundImage: '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
        backgroundImage: '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
        filter:  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

如果我排除 -ms-filter 的最后一个条件，代码运行良好（因为根据我阅读的文档，如果 jQuery.css 支持此过滤器，则没有提到它）。对于我看到的问题的一种解决方案是使用

查看我的浏览器的名称和版本

navigator.userAgent

如果是“Internet Explorer 8.0”，我会应用单一背景颜色。

现在我的问题是，有没有其他方法可以解决这个问题并在 IE8 上获得渐变？

【问题讨论】：

标签： javascript jquery css internet-explorer-8 gradient

【解决方案1】：

有另一种语法可以用 jQuery 设置 CSS。试试下面的

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

【讨论】：

谢谢。没想到会这么简单。
在 ie8 中不起作用，至少在开发工具模拟器中不起作用。它正在应用过滤器而不是 ms-filter，它始终是亮蓝色。
好的，谢谢...也许我们可以检查哪个浏览器正在访问您的网站并使用正确的过滤器。
你好algorhythm，整天都在尝试，这在ie8中不起作用。
@JenniferMichelle 但是如果你删除'filter': 'progid:... 行，它在IE8 中是否有效？这里的问题是如何使用 jQuery 设置 '-ms-filter' 属性......如果 'filter' 是 IE8 的正确属性，则不是。也许你是对的，IE8 在 'filter' 和 '-ms-filter' 的组合中存在问题，但是你必须实现一个浏览器开关，并在浏览器的情况下添加你需要的属性......

【解决方案2】：

您的 javascript 有问题。 -ms-filter 的对象键应该用双括号或单括号括起来，否则会导致语法错误。

【讨论】：

抱歉忘记提了。这只是为了查看目的而编写的。实际上，对于 ms-filter，我在应用 css 之前创建了一个字符串 var，并且我直接传递了字符串变量而不是过滤器设置。