不透明度在 IE8 中不起作用答案

【问题标题】：Opacity is not working in IE8不透明度在 IE8 中不起作用
【发布时间】：2014-10-05 03:49:07
【问题描述】：

我在网站上发现了许多类似的问题，但没有什么能接近我的救援。我动态地将一个 div 附加到一个元素中，在这个 div 中我提到了 opacity 样式属性，如下所示。

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
opacity:0.5;
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');

这样做是为了在将 ajax 请求发送到服务器时模糊页面。这段代码是在 javascript 区域中编写的，因此我使用的是内联样式。以上样式在 IE10 中可以正常工作，但在 IE8 中不行。

【问题讨论】：

尝试在单独的css 文件中定义样式，附加干净的HTML
你应该在这里询问它是否适用于 IE8 哈哈

标签： javascript jquery css opacity ie8-browser-mode

【解决方案1】：

在样式标签内为filter 使用单引号。

 $('#cell').append("<div id='el_loading' 
 style='-ms-filter:\progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\; /* double quote will end your style here only. So use single quote. */
 filter: alpha(opacity=50);
 opacity:0.5;
 background-color: #fbfbfb;
 height: 100%;
 width:100%;
position:relative;z-index:9999;'>
<div style='top: 74.2px; width: 91px;'>
<img  src='/myimage/loading.gif' title='Please Wait...' />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>");

【讨论】：

相应地更改了我的代码，但结果相同。我在 IE10 浏览器中以 IE8 浏览器模式进行测试，这会导致任何问题吗？
我已经稍微更新了我的代码。现在就试试。还有一个问题，它可以在其他浏览器中运行吗？？
即使在 IE10 中也可以在其他浏览器中使用，进行上述更改但徒劳无功。

【解决方案2】：

尝试添加以下内容

 -moz-opacity: 0.50;
    opacity:.50;
    filter: alpha(opacity=50);

所以你的代码会变成

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity:.50;
filter: alpha(opacity=50);
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');

【讨论】：

没有效果！

【解决方案3】：

请将您的 css 脚本移动到您自己的 css 文件中。

例如：

创建一个名为 style.css 的文件，然后粘贴以下代码：

#el_loading{ /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ 过滤器：阿尔法（不透明度= 50）； /* 网景 */ -moz 不透明度：0.5； /* Safari 1.x */ -khtml-不透明度：0.5； /* 好的浏览器 */ 不透明度：0.5；背景颜色：#fbfbfb；高度：100%；宽度：100%；位置：相对 ;z-index:9999; }

你的脚本是这样的：

$('#cell').append('<div id="el_loading">
    <img  src="/myimage/loading.gif" title="Please Wait..." />
    <span>
        <b>Please wait ...</b>
    </span>
    </div>
</div>');

希望对您有所帮助。

【讨论】：