1

所以麻烦是：登录/注册表单有黑色矩形而不是透明度：

风格是：

#LoginPart
{
    background-image: url('../images/login_bg.png');
    float: right;
    width: 184px;
    height: 25px;
    margin-top: 10px;
    margin-right: 100px;

    text-align: center;
}

这是背景（有点难看）：

2

我的问题很糟糕...我知道代码不是最好的，但它可以在其他浏览器中使用

css：

        <div id="Menu">
            <ul id="Navigation">
              <li><a href="#home"><div class="HighlightItem"></div><span>Home</span></a></li>
              <li><a href="#vending"><div class="HighlightItem"></div><span>Vending machine</span></a></li>
              <li><a href="#videos"><div class="HighlightItem"></div><span>Videos</span></a></li>
              <li><a href="#about"><div class="HighlightItem"></div><span>About</span></a></li>
              <li><a href="#contact"><div class="HighlightItem"></div><span>Contact</span></a></li>
            </ul>
        </div>

Navigation:

#Navigation
{
  margin:0;
  padding:0;

  text-align:center;
  list-style:none;
  height: 50px;
}

.HighlightItem
{
    width: 142px;
    height: 50px;
    position: absolute;
    display: none;
    background:none;
}

#Navigation span
{
    position: relative;
    text-align: center;
    top: 40%;
    font-size: small;
    z-index: 5000;
    font-weight: bold;
    text-shadow: 1px 0px 0px #000;
}

在 span 元素中有菜单文本。我为它创建了z-index: 5000 以使其具有透明度的绝对 div，但在其上方保留文本。

这是我用来动画菜单的 JS (Jquery) 代码：

    $('li>a').hover(function(){
        $(this).children('div').stop();
        $(this).children('div').css({opacity: 0});
        $(this).children('div').css('background-image', 'url("../images/but_hov.png")');
        $(this).children('div').css('background-repeat', 'no-repeat');
        $(this).children('div').css('background-position', 'center center');
        $(this).children('div').fadeTo(400, 1.0);
    }, function(){
            $(this).children('div').stop();
            $(this).children('div').fadeTo(400, 0, function() {
            $(this).children('div').css('background-image', 'none');
            $(this).children('div').hide();
        });
    });

欢迎任何帮助！

【问题讨论】：

@sam 可能，但 ie9 尚未发布 :(
MS 14日发布IE9 Release Globally Available for Consumers and Businesses

标签： jquery html css internet-explorer transparency

【解决方案1】：

IE8 仍然无法正确获得 PNG 透明度。这就是您在菜单突出显示上看到黑色边框的原因。有一个blog post（其中之一）解释了这个问题。因此，这可能是导致您的登录失败和菜单突出显示周围的黑色边框出现问题的原因。我仍在研究这个问题，如果我找到了一个很好的方法，我会编辑这个答案。

编辑：所以，刚刚在 IE8 中对我有用并且在 Chrome 11 中完美运行的 here is a demo。我在 IE8 中仍然看到轻微的边框但我希望它对你来说已经足够好了。在我看来，像素完美的跨浏览器设计对于你想要的那种效果几乎是不可能的，除非你想依赖更多的 JavaScript 或（我敢说）Flash。几年前我确实做了一个 PNG alpha 悬停突出显示，它在 IE6 中工作，但它依赖于自定义 JavaScript、clear.gif 和特定的 CSS 类。可能有更好的方法来做到这一点，但这个解决方案非常轻量级，因为它只依赖于动画的 jQuery 和一些特定于 IE 的 CSS。如果您关心有效的“主”CSS，您可能希望将 IE 样式放在单独的文件中。

顺便说一句，如果您有一个不透明的背景，这将非常容易 - 您只需将 background-color 属性添加到 <li> 设置为您的背景颜色和透明度就可以了。我以前读过another question，还看到here 以获得一个很好的答案，解释为什么IE 在为透明PNG 设置动画时遇到问题。我在这些答案中使用了一些建议来帮助我解决这里的问题。

希望这会有所帮助！

【讨论】：

【解决方案2】：

对于您的“登录/注册”透明度问题，请尝试从您的脑海中删除此行 <script>：

$('#LoginPart').corner('15px');

似乎 IE 不喜欢它。

【讨论】：

【解决方案3】：

如果我运行，jquery 角插件似乎会导致 1st 问题

$(".jquery-corner").css("display", "none");

它清理了后台问题。不确定它是否也与按钮悬停有关，但我可能会先摆脱 jquery 角。

【讨论】：

【解决方案4】：

无论出于何种原因，我对 htc 文件从来没有太多的运气，但我认为我不妨将其发布为一个可能的解决方案：

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

我知道使用 CSS 边框半径对所有非 ie 浏览器都更有意义，所以如果你能让它工作，那可能是值得的。

【讨论】：