Question

我正在试验这个颜色控制面板，用户可以使用控制面板中的幻灯片更改页面的外观。增加的复杂性是滑入式面板位于父窗口中，其中进行更改的页面位于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上获得渐变吗？

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

Answer 2

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

-ms-通过jquery过滤IE8中的渐变

2 个答案: