html

Question

我在使用 Internet Explorer 11 时遇到 css 属性不透明度问题。代码很简单：

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

在 IE11 上，不透明度设置不适用于第二个 div。所有其他浏览器都很好。我通过本地 uWamp 使用 Apache 服务器（所以它是一个本地主机网站，但放在网上时也是一样）。

我知道还有其他关于这个主题的话题，但到目前为止没有得到他们的帮助...

使用开发者工具，我发现IE将不透明度设置为0： Wrong opacity in IE

Answer 1

在旧的 Internet Explorer 版本上，您需要添加它以获得透明度：

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

或者这个：

filter : alpha(opacity=70)

但在 IE10+ 上你不再需要它了，你可以使用 opacity: 0.7.

尝试在您的 <head> 标签之间添加这一行：

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

此行强制 IE11 使用最新的渲染引擎（在这种情况下为 Edge 引擎）。

Answer 2

背景颜色的技巧奏效了，但元标记没有任何改变。

最后，我通过删除 IE 缓存 (tools --> internet options --> general --> delete...) 让 "opacity" css 正常工作。

Answer 3

CSS opacity 属性似乎可以在 IE11 上正常工作，在 html 文档的顶部添加 <!DOCTYPE html> 声明（在 <html> 打开标签之前）

（我很抱歉回答这个问题有点晚（三年多）。我想这对仍在与 IE11 作斗争的人可能有用）。

注意：使用 IE 版本 11.1622.16299.0 测试

html - CSS 不透明度不同于 1 或 0 在 IE11 中不起作用

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

css

opacity

internet-explorer-11