jquery - 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 channel 的小 PNG 图像作为背景。现在为纯色背景使用背景图片有点遗憾，但它会在所有浏览器中实现您想要的结果。