IE 中的不透明度 =S答案

【问题标题】：Opacity in IE =SIE 中的不透明度 =S
【发布时间】：2011-06-22 22:05:06
【问题描述】：

我已经查看了其他问题，但仍然无法弄清楚。

编辑这是一个重现我的错误的 HTML 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<HTML>
<HEAD><STYLE> 
HTML
{
    min-height: 0px;
    font-size: 100%;
}
BODY
{
    min-height: 0px;
    font-size: 100%;
}
DIV
{
    min-height: 0px;
    font-size: 100%;
}
HTML
{
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
BODY
{
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
BODY
{
    position: relative;
    min-width: 100%;
    background-color: #333;
    margin: 0px;
    display: inline-block;
    font-family: Arial, Sans-Serif;
    height: 100%;
    font-size: 12px;
}
#abc_content
{
    border-bottom: #666 2px solid;
    border-left: #666 0px solid;
    padding-bottom: 5px;
    background-color: #fff;
    padding-left: 5px;
    padding-right: 5px;
    border-top: #666 2px solid;
    border-right: #666 0px solid;
    padding-top: 5px;
}
#abc_leftbar + #abc_content
{
    margin-left: 210px;
}
.ui-helper-clearfix:after
{
    display: block;
    height: 0px;
    visibility: hidden;
    clear: both;
    content: ".";
}
.ui-helper-clearfix
{
    display: inline-block;
}
.ui-helper-clearfix
{
    display: block;
}
.ui-state-disabled
{
    cursor: default !important;
}
.ui-widget-header
{
    background: #176000;
    color: #ffffff;
}
.ui-state-default
{
    border-bottom: #176000 1px solid;
    border-left: #176000 1px solid;
    background-color: #458b11;
    color: #ffffff;
    border-top: #176000 1px solid;
    border-right: #176000 1px solid;
}
.ui-widget-header .ui-state-default
{
    border-bottom: #176000 1px solid;
    border-left: #176000 1px solid;
    background-color: #458b11;
    color: #ffffff;
    border-top: #176000 1px solid;
    border-right: #176000 1px solid;
}
.ui-state-disabled
{
    filter: alpha(opacity=75); opacity: .75;
    -moz-opacity: .75;
    -khtml-opacity: .75;
}
.ui-corner-tl
{
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
}
.ui-corner-tr
{
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}
.ui-corner-bl
{
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.paging_full_numbers .ui-button
{
    padding-bottom: 2px;
    margin: 0px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
    padding-top: 2px;
}
.ui-buttonset .ui-button
{
    margin-right: -0.1em !important;
}
.paging_full_numbers
{
    width: 350px !important;
}
.ui-toolbar
{
    position: relative;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    zoom: 1;
    height: 20px;
    padding-top: 5px;
}
.dataTables_paginate
{
    width: auto;
}
.dataTables_wrapper
{
    font-family: Arial, Sans-Serif;
    max-width: 100%;
    font-size: 120%;
    font-weight: bold;
}
.dataTables_wrapper
{
    position: relative;
    min-height: 302px;
    clear: both;
    _height: 302px;
}
.dataTables_paginate
{
    text-align: right;
    line-height: 20px;
    float: right;
    height: 20px;
}

</STYLE></HEAD>
<BODY><DIV id="abc_content"><DIV id="dd_table_wrapper" class="dataTables_wrapper"><DIV class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"><DIV id="dd_table_paginate" class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">

<SPAN id="dd_table_first" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" jQuery1297179778124="2">First</SPAN>

</DIV></DIV></DIV></DIV></BODY></HTML>

它适用于 FF 和 Chrome，但不适用于 IE（我使用的是 IE 8）。

有什么想法吗？谢谢！

【问题讨论】：

标签： css internet-explorer jquery-ui filter opacity

【解决方案1】：

您需要在 IE 8 中设置-ms-filter

opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=70); /* IE lt 8 */
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
-khtml-opacity: .70; /* Safari 1.x */
-moz-opacity: .70; /* FF lt 1.5, Netscape */

【讨论】：

感谢您的快速回复。不幸的是它仍然不起作用:(
浏览器缓存是否正在进行？你有网址吗？我发布的内容应该让您在每个浏览器中都不透明。
这是第一次应该正确的答案对我不起作用。我已经从 IE 复制了跟踪并用它编辑了我的帖子。它创建了一个与我完全相同的 html 页面，但过滤器在“第一个”按钮（或跨度，更确切地说）上不起作用。
那是因为你有.ui-state-disabled { cursor: default !important; } 而不是down vote you need to set the -ms-filter in IE 8 opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=70); /* IE lt 8 */ -ms-filter: "alpha(opacity=70)"; /* IE 8 */ -khtml-opacity: .70; /* Safari 1.x */ -moz-opacity: .70; /* FF lt 1.5, Netscape */
对不起，我不太明白。这是一个更清楚的例子。你能用你的想法修改它吗？ jsfiddle.net/wqTEp/7

【解决方案2】：

IE8 不支持不透明度 - 您可以改用 MS 的渐变滤镜：

.className{
opacity: 0.7; 
-ms-filter: "alpha (opacity=70)"; 
filter: alpha (opacity=70);
}

【讨论】：

我同意 Hunter 的观点，上述方法应该可以正常工作，您可能有缓存问题。

【解决方案3】：

我只是改变了颜色，让它看起来像是在改变不透明度。 IE 失败...

【讨论】：

【解决方案4】：

尝试使用：

opacity:.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);

【讨论】：