Javascript jQuery fadeIn（）淡出（）IE7中的黑色光晕

就像许多其他开发人员一样，我在使用CSS PNG背景时也遇到了同样的黑晕问题。无视模糊。关注黑色光环

==========HTML==========

<div class="s4-notdlg append-bottom-x" id="header"> <a class="show-settings active" href="javascript:;"></a>
  <div class="container">
    <div class="span-13 last">
      <div id="explore"> <a id="header-home-icon" href="" class=""></a> <a id="menu" href="javascript:;" class=""></a>
        <div id="dropdown" style="display: none;">
          <div id="wrap"> </div>
        </div>
        <a style="bottom: 112px;position: absolute;right: 84px;" class="closeThis close" href="javascript:;"></a> </div>
    </div>
  </div>
</div>

a#menu.active {
    background-position: -399px -41px;
}
#dropdown {
    background: url(images/bg/menu_dropdown_bg.png) no-repeat;
    height: 340px;
    /*height: 556px;*/
    position: absolute;
    right: -66px;
    top: 48px;
    width: 875px;
    z-index: 99999;
    display:none;
}
#dropdown #wrap {
    /*height: 413px;*/
    height: 211px;    
    margin: 26px 91px 0;
    width: 698px;
}

    //menu
var menu = $('#menu');
var dropdown = $('#dropdown');

menu.toggle(function () {
    menu.addClass('active');
    dropdown.fadeIn();
}, function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return false;
});
dropdown.mouseleave(function () {
    menu.trigger('click');
});

=============jQuery==========

<div class="s4-notdlg append-bottom-x" id="header"> <a class="show-settings active" href="javascript:;"></a>
  <div class="container">
    <div class="span-13 last">
      <div id="explore"> <a id="header-home-icon" href="" class=""></a> <a id="menu" href="javascript:;" class=""></a>
        <div id="dropdown" style="display: none;">
          <div id="wrap"> </div>
        </div>
        <a style="bottom: 112px;position: absolute;right: 84px;" class="closeThis close" href="javascript:;"></a> </div>
    </div>
  </div>
</div>

a#menu.active {
    background-position: -399px -41px;
}
#dropdown {
    background: url(images/bg/menu_dropdown_bg.png) no-repeat;
    height: 340px;
    /*height: 556px;*/
    position: absolute;
    right: -66px;
    top: 48px;
    width: 875px;
    z-index: 99999;
    display:none;
}
#dropdown #wrap {
    /*height: 413px;*/
    height: 211px;    
    margin: 26px 91px 0;
    width: 698px;
}

    //menu
var menu = $('#menu');
var dropdown = $('#dropdown');

menu.toggle(function () {
    menu.addClass('active');
    dropdown.fadeIn();
}, function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return false;
});
dropdown.mouseleave(function () {
    menu.trigger('click');
});

这就是我实现的，没有骰子：

---

对此没有一个简单的答案，但IE6无法处理alpha透明性。IE7和IE8只有部分处理alpha透明性的实现，而没有处理它们

有很多令人不快的方法来解决这个问题，所以我个人采取的方法是，这些浏览器都是较旧的浏览器，其效果纯粹是装饰性的，所以让您的生活更轻松，只需为这些浏览器禁用此背景

---

然而，这并不能回答你的问题。你需要做的是。你说你已经试过了，但它不在你发布的代码中，你能发布你试图向我们展示的示例吗？

对于alpha image loader，图像的路径是相对于html文档的，而不是相对于css的。你处理好了吗？这真的很棘手。我太迷恋这个了。嗯。。首先，尝试从html中删除样式，并严格使用css作为样式。否则，也许它与zindex有关？它不是z指数。我希望是这样。