IE8现场故障

Question

我正在开发一个网站，我无法在IE8或higer下找到解决一些问题的方法。

首先，这里是临时站点位置：http://capitalpay.co.uk/。

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

我的曼尼强调不好..。我知道这段代码不是最好的，但它能在其他浏览器中工作

S

​

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();
        });
    });

欢迎任何帮助！

Answer 1

IE8仍然没有得到PNG透明度的正确。这就是为什么你看到黑色边框上的菜单亮点。有一个博客帖子 (其中一个)解释了这个问题。因此，这可能是导致您的问题，与打破的登录和黑色边框周围的菜单突出显示。我仍然在看这个问题，如果我找到了一个很好的方法，我会编辑这个答案。

编辑:所以，这是一个演示在IE8中对我很有用，在Chrome 11中工作得很好。我仍然在IE8中看到一个小小的边框，但我希望它对你来说足够好。在我看来，像素完美的跨浏览器设计与你想要的效果几乎是不可能的，除非你想依赖更多的JavaScript或者(我敢说)闪存。几年前，我确实在IE6中做了一个PNG悬停突出显示，但它依赖于自定义JavaScript、一个clear.gif和特定的CSS类。也许有一个更好的方法来做这个，但这个解决方案是相当轻量级的，因为它只依赖于jQuery的动画和一些IE特定的CSS。如果您关心有效的“主”CSS，您可能希望将IE样式放在一个单独的文件中。

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

希望这能有所帮助！

Answer 2

对于“登录/注册”透明度问题，请尝试从头<script>中删除这一行。

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

好像IE不喜欢它。

Answer 3

如果我运行的话，jquery角插件似乎导致了1问题。

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

它清除了背景问题。不确定它是否也与按钮悬停有关，但我首先可能会先去掉jquery角。