问题
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