Opacity CSS not working in IE8

Question

I m using CSS to indicate the trigger text for a jQuery slide-down section  i e  when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action   This works fine in Firefox and Chrome  but in IE8 the opacity doesn t change   I ve tried a variety of CSS settings without any success   For example  HTML    lt h3 class  slidedownTrigger  gt This is the trigger text lt  h3 gt    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      What s stopping IE changing the opacity  Note  I ve tried this on a variety of different elements  swapping round the order of the CSS statements  and just using the IE ones on their own  I ve also tried using  -ms-filter   alpha opacity 75      but with no success    I ve run out of things to try to get opacity modification working in IE8   Any ideas

User · Answer

You can also add a polyfil to enable native opacity usage in IE6-8.

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

This is a stand alone polyfil that does not require jQuery or other libraries. There are several small caveats it does not operate on in-line styles and for any style sheets that need opacity polyfil'd they must adhere to the same-origin security policy.

Usage is dead simple

<!--[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>

User · Answer

CSS  I used to use the following from 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      Compass  However  a better solution is to use the Opacity Compass mixin  all you need to do is to  include opacity 0 1   and it will take care of any cross-browser issues for you  You can find an example here

User · Answer

Using display  inline-block  works on IE8 to resolve this problem   FWIW  opacity  0 75 works on all standards-compliant browsers

User · Answer

here is the answer for IE 8  AND IT WORKS for alpha to work in IE8 you have to use position atribute for that element like  position relative or other   http   www codingforums com showthread php p 923730

User · Answer

You need to set Opacity first for standards-compliant browsers  then the various versions of IE   See Example   but this opacity code not work in 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       Note that I eliminated -moz as Firefox is a Standards Compliant browser and that line is no longer necessary   Also  -khtml is depreciated  so I eliminated that style as well   Furthermore  IE s filters will not validate to w3c standards  so if you want your page to validate  separate your standards stylesheet from your IE stylesheet by using an if IE statement like below    lt  -- if IE  gt   lt link rel  stylesheet  type  text css   href  http   www mysite com css ie css    gt   lt   endif -- gt    If you separate the ie quirks  your site will validate just fine

User · Answer

This code works  filter  alpha opacity   50   zoom 1    You need to add zoom property for it to work

User · Answer

None of the answers above worked for me  so I just gave my DIV tag a transparent background image instead  that worked perfectly for all browsers

User · Answer

No idea if this still applies to 8  but historically IE doesn t apply several styles to elements that don t  have layout    see  http   www satzansatz de cssd onhavinglayout html

User · Answer

Setting these  exactly like I have written  has served me when I needed it   -moz-opacity  0 70  opacity  70  filter  alpha opacity 70

User · Answer

Apparently alpha transparency only works on block level elements in IE 8  Set display  block

[css] Opacity CSS not working in IE8

Examples related to css

Examples related to internet-explorer-8

Examples related to opacity