web-dev-qa-db-ja.com

IE8で不透明CSSが機能しない

CSSを使用して、jQueryスライドダウンセクションのトリガーテキストを示しています。つまり、トリガーテキストの上にカーソルを置くと、カーソルがポインターに変わり、トリガーテキストの不透明度が低下して、テキストにクリックアクションがあることを示します。

これはFirefoxとChromeでは正常に機能しますが、IE8では不透明度は変わりません。

成功せずに、さまざまなCSS設定を試しました。

例えば

HTML：

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS：

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

不透明度の変更IEを停止しているのは何ですか？注：さまざまな要素でこれを試し、CSSステートメントの順序を入れ替えて、IEを単独で使用しました。私も使用してみました

-ms-filter: "alpha(opacity=75)";

しかし、成功しませんでした。

IE8で不透明度の変更が機能するようにしようとするものがなくなりました。

何か案は？

cssinternet-explorer-8opacity
143
user71463

これがまだ8に当てはまるかどうかはわかりませんが、歴史的にIEは、「レイアウトを持たない」要素にいくつかのスタイルを適用しません。

参照： http://www.satzansatz.de/cssd/onhavinglayout.html

65
Azeem.Butt

これらの設定（私が書いたとおり）は、必要なときに役立ちました。

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
158
Gabriel McAdams

まず、標準に準拠したブラウザのOpacityを設定し、次にIEのさまざまなバージョンを設定する必要があります。例を参照してください。

ただし、この不透明度コードはie8では機能しません

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Firefoxは標準に準拠したブラウザであり、この行は不要になったため、-mozを削除したことに注意してください。また、-khtmlは減価償却されているので、そのスタイルも削除しました。

さらに、IEのフィルターはw3c標準に対して検証しないため、ページを検証する場合は、次のようなif IEステートメントを使用して、標準スタイルシートをIEスタイルシートから分離します。

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

IEの癖を分けると、サイトは正常に検証されます。

49
Kevin Florida

アルファ透明度は、IE 8.のブロックレベル要素でのみ機能するようです。

17
Bonnie V.

IE8では、display: inline-block;を使用してこの問題を解決します。

FWIW、opacity: 0.75は、すべての標準準拠のブラウザーで動作します。

17
crmpicco

CSS

CSS-Tricks から以下を使用していました。

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

コンパス

ただし、より良い解決策は Opacity Compass mixin を使用することです。あなたがする必要があるのは@include opacity(0.1);だけであり、ブラウザ間の問題を処理します。例を見つけることができます here 。

5
d4nyll

上記の答えはどれもうまくいきませんでしたので、代わりにDIVタグに透明な背景画像を与えました。これはすべてのブラウザで完璧に機能しました。

2
Darren Riches

IE 8の答えはこちら

そして、それがIE8で動作するアルファのIT WORKSあなたはのようなその要素の位置属性を使用する必要があります

位置：相対またはその他。

http://www.codingforums.com/showthread.php?p=9237

2
red

このコードは動作します

filter: alpha(opacity = 50); zoom:1;

ズームプロパティを追加する必要があります:)

1
mejiwara

IE6-8でポリフィルを追加して、ネイティブの不透明度の使用を有効にすることもできます。

https://github.com/bladeSk/internet-Explorer-opacity-polyfill

これは、jQueryまたは他のライブラリを必要としないスタンドアロンのポリファイルです。インラインスタイルでは動作しないいくつかの小さな警告があります。また、不透明度のポリフィルが必要なスタイルシートでは、同じ起源のセキュリティポリシーに従う必要があります。

使い方は簡単です

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>
1
Chris Marisic