-ms-通过jquery过滤IE8中的渐变 [英] -ms-filter for gradient in IE8 via jquery

问题描述

我正在试验这个颜色控制面板，用户可以使用控制面板中的幻灯片更改页面的外观。增加的复杂性是滑入式面板位于父窗口中，其中进行更改的页面位于iframe内。我希望更改在控制面板中生成时生效。为此，我不想使用AJAX。为此，我设计了一个算法，它工作正常。

I am experimenting on this color control panel where a user can change the look and feel of the page using a slide in control panel. An added complexity is that the slide-in panel is in parent window where as the page that the changes are made to is inside an iframe. I want the changes to take affect as they are made inside the control panel. For this I don't want to use AJAX. For this I have devised an algorithm and it is working fine.

除了IE8的问题之外的一切都运行正常。我在页面加载时使用css中的这种样式定义作为默认值。

Everything apart an issue with IE8 is working fine. I am using this style definition in css as default when the page is loaded.

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

(Thanks to 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是包含梯度的两个十六进制值的两个变量：

Now this is what I am trying to do in javascript using jQuery ( hex1 and hex2 are two variables containing two hex values for gradient):

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支持这个过滤器，那我就读到了。
我看到我的问题的一个解决方案是使用

The code runs fine if I exclude the last condition of -ms-filter (because according to the documentation I read nowhere is it mentioned if this filter is supported by jQuery.css). For what I see one solution to my problem is to see the name and version of my browser using

navigator.userAgent

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

and if it is "Internet Explorer 8.0" I apply single background color.

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

Now my question is that, is there any other way to go around this and get gradient on IE8 also?

推荐答案

有一种用jQuery设置CSS的替代语法。尝试使用以下

there is an alternative syntax to set CSS with jQuery. try it with following

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 */
});

这篇关于-ms-通过jquery过滤IE8中的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！