rgba()在IE8中不起作用

Question

我刚刚使用IE 8在jQuery中坚持使用RGBA()操作

到目前为止我有这个:

$('.set').click(function (e) {
      var hiddenSection = $('div.hidden');
      hiddenSection.fadeIn()
      .css({ 'display': 'block' })
      .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
      .css({ top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
           left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
       })
       .css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
       .appendTo('body');
       $('span.close').click(function () { $(hiddenSection).fadeOut(); });
});

它适用于所有其他浏览器,不知道为什么它在IE 8中失败我得到了这个错误!

Invalid property value在jquery.min.js中.

任何帮助是极大的赞赏!

谢谢

Answer 1

简单回答:IE8不支持RGBA属性.它只知道RGB.

RGBA支持仅在IE9中添加.

其他非常古老的浏览器也可能不支持RGBA.但是,除了IE8之外,还有很多旧的浏览器仍然在使用.

有一些方法可以解决这个问题:

• 使用CSS3Pie等polyfill.这将允许您在CSS中指定RGBA背景颜色.您仍然无法直接在JS代码中使用它,但您可以更改类来处理它.

• 使用Modernizr之类的工具来检测浏览器是否支持此功能,如果不支持则提供不同的功能.

• 使用IE8的-ms-filter样式来实现透明效果.这允许您设置一系列特殊效果,包括不透明度.这是一个非标准的IE功能,在IE9/10中被标准CSS取代,但在旧版IE的某些情况下仍然有用.

• 使用带有Alpha通道的小PNG图像作为背景.现在使用背景图像获得纯色背景有点遗憾,但它会达到您在所有浏览器中寻找的结果.

Answer 2

ie8不支持`rgba.

但是,有一个透明度的技巧,即8

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

前两位数#7F000000是不透明度,接下来的六位数是六角色代码.

7f相当于50%

所以你的代码应该是这样的:

.css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
.css({'filter' : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);'}) //IE Fallback

来源:http://css-tricks.com/rgba-browser-support/

编辑:在Derek Henderson发表评论之后,我不会编写代码,但是如果你想在IE8上添加它,请检查jQuery.browser