6

我只是坚持使用 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中。

任何帮助是极大的赞赏！

谢谢

4

4 回答 4

10

简单的回答：IE8 不支持 RGBA 属性。它只知道RGB。

RGBA 支持仅在 IE9 中添加。

其他非常旧的浏览器也可能不支持 RGBA。但是，除了 IE8 之外，没有多少旧浏览器仍在使用。

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

  • 使用诸如 CSS3Pie 之类的 polyfill。这将允许您在 CSS 中指定 RGBA 背景颜色。您仍然无法像拥有它一样直接在 JS 代码中使用它，但您可以更改类来处理它。

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

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

  • 使用带有 Alpha 通道的小型 PNG 图像作为背景。这些天使用背景图像作为纯色背景有点遗憾，但它会达到您在所有浏览器中寻找的结果。

于 2013-05-09T13:09:02.233 回答
5

`rgba 不受 ie8 支持。

然而，在 i.e8 中有一个透明的技巧

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

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

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

于 2013-05-09T13:14:42.177 回答
0

而不是这个：

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

你可以这样做：

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

这将适用于所有浏览器。

于 2013-05-09T13:16:27.853 回答
0

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

rgba(0,0,0,0.5)

你错过了'a'部分。

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

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

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

米奇。

于 2013-05-09T13:09:22.093 回答