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中失败我收到了这个错误！

jquery.min.js 中的

Invalid property value。

非常感谢任何帮助！

由于

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

<8>`ieg支持`rgba。

然而，在ie8

中存在透明性的伎俩

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

#7F000000的前2位数是不透明度，接下来的6位是hexa颜色代码。

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

Answer 3

你有一个错字。它应该是：

rgba(0,0,0,0.5)

你错过了'a'部分。

但是，我不确定IE8是否支持rgba() ...那么jQuery可能还有一个包装器吗？

为了安全起见，我会尝试以png格式设置具有透明度的背景图像。

.css({ 'background-image': 'http://example.com/myimage.png' })

米奇。

Answer 4

而不是：

.css({ 'background-color': 'rgba(0,0,0,0.5)' })

你可以这样做：

.css({ 'background-color': 'rgb(0,0,0)', 'opacity': '0.5' })

这适用于所有浏览器。

rgba（）在IE8中不起作用

4 个答案: