html - CSS Opacity different than 1 or 0 not working in IE11

问题

I'm facing an issue with the css property opacity, with Internet Explorer 11. The code is very simple:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
div{
  width:100px;
  height: 100px;
  background: blue;
}
#d1{
  opacity: 1;
}
#d2{
  opacity: 0.7;
}
</style>
</head>
<body>
<div id='d1'>df</div>
<div id='d2'>trtret</div>
</body>
</html>

On IE11, the opacity setting doesn't work for the second div. All others browsers are fine. I'm using Apache server through local uWamp (so it's a localhost website, but same matter when put online).

I know there are others topics on the subject, but no help from them so far...

Using the developer tools, I discovered that the opacity is set to 0 by IE: Wrong opacity in IE

回答1:

The trick with background-color worked, but the meta tag didn't change anything.

Finally I got the "opacity" css working by deleting the IE cache (tools --> internet options --> general --> delete...).

回答2:

On old Internet Explorer versions you needed to add this to get transparency :

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

or this :

filter : alpha(opacity=70)

But on IE10+ you don't need it anymore, you can use opacity: 0.7.

Try to add this line between your <head> tags :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This line forces IE11 to use the most recent rendering engine (in that case the Edge engine).

回答3:

CSS opacity property seems to work fine with IE11, adding <!DOCTYPE html> declaration at the top of html document (before <html> open tag)

(I apologize answering this question a little bit late (over three year). I guess this can be useful for someone still fighting with IE11).

Note: Tested with IE version 11.1622.16299.0

来源：https://stackoverflow.com/questions/37565745/html-css-opacity-different-than-1-or-0-not-working-in-ie11

标签

html

css

internet-explorer-11

opacity