0

我正在这个颜色控制面板上进行试验，用户可以使用控制面板中的幻灯片来更改页面的外观和感觉。一个额外的复杂性是滑入式面板位于父窗口中，而进行更改的页面位于 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 */

现在这就是我在使用 jQuery 的 javascript 中尝试做的事情（ 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 上获得渐变？

4

2 回答 2

3

使用 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 */
});
于 2013-01-17T08:25:11.857 回答
0

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

于 2013-01-17T08:26:32.020 回答