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で不透明度の変更を機能させるために必要なものが不足しています。

何か案は？

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

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

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

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

最初に標準に準拠したブラウザの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の癖を分離すると、サイトは問題なく検証されます。

どうやらアルファ透明度はIE 8のブロックレベル要素でのみ機能します。ディスプレイを設定：ブロック。

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

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

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);それを実行することだけであり、ブラウザ間の問題に対応します。ここで例を見つけることができます。

ここにIE 8の答えがあります

そして、それがIE8で機能するためには、その要素の位置属性を使用する必要があります

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

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

上記の答えはどれもうまくいきませんでしたので、代わりにDIVタグに透明な背景画像を指定しました。

このコードは機能します

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

これを機能させるには、ズームプロパティを追加する必要があります。

ポリフィルを追加して、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>