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 valuejquery.min.jsで。

どんな助けでも大歓迎です！

ありがとう

4

4 に答える 4

10

簡単な答え: IE8 は RGBA プロパティをサポートしていません。RGBについてのみ認識します。

RGBA サポートは IE9 でのみ追加されました。

他の非常に古いブラウザも RGBA をサポートしていない場合があります。しかし、これほど古いブラウザで、IE8 以外にまだ使用されているものは多くありません。

これを回避するには、いくつかの方法があります。

  • CSS3Pie などのポリフィルを使用します。これにより、CSS で RGBA 背景色を指定できるようになります。そのままでは JS コードで直接使用することはできませんが、クラスを変更して処理することはできます。

  • Modernizr などのツールを使用して、ブラウザーがこの機能をサポートしているかどうかを検出し、サポートしていない場合は別の機能を提供します。

  • IE8 の-ms-filterスタイルを使用して透明効果を実現します。これにより、不透明度を含むさまざまな特殊効果を設定できます。これは IE の非標準機能であり、IE9/10 では標準の CSS に置き換えられていますが、古い IE バージョンの特定のケースでは依然として有用です。

  • 代わりに、背景としてアルファ チャネルを持つ小さな PNG 画像を使用してください。最近、単色の背景に背景画像を使用しているのは少し残念ですが、すべてのブラウザーで探している結果が得られます。

于 2013-05-09T13:09:02.233 に答える
5

`rgba は ie8 ではサポートされていません。

ただし、i.e8 には透過性のためのトリックがあります。

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

の最初の 2 桁#7F000000は不透明度で、次の 6 桁は 16 進数のカラー コードです。

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 に答える