1

Question

我正在开发一个网站，我无法找到解决 IE8或更高下某些内容的方法。

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

1

所以问题是：登录/注册表单有黑色矩形而不是透明度： enter image description here

风格是：

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

    text-align: center;
}

这是背景（有点难看）： enter image description here

2

我的meny强调不好......我知道代码不是最好的，但它适用于其他浏览器

取值 enter image description here

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

对于“登录/注册”透明度问题，请尝试从头部<script>删除此行：

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

似乎IE不喜欢它。

Answer 2

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

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

它清理了背景问题。不确定它是否也与按钮悬停有关，但我可能首先要先摆脱jquery角落。

Answer 3

IE8仍然没有正确的PNG透明度。这就是您在菜单高亮区看到黑色边框的原因。有blog post（许多人之一）解释了这个问题。因此，这可能是导致您的问题与破坏的登录和菜单突出显示的黑色边框之间的问题。我还在看这个问题，如果我找到一个很好的方法，我会编辑这个答案。

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

顺便说一下，如果你有一个不透明的背景，这将非常简单 - 你只需要将background-color属性添加到设置为背景颜色的<li>，透明度就可以了。我之前已经阅读了another question，并且还看到了here的一个很好的答案，解释了为什么IE在设置透明PNG动画时遇到问题。我已经在这些答案中使用了一些建议来帮助解决我的问题。

希望这有帮助！

Answer 4

出于某种原因，我从来没有对htc文件好运，但我想我可能会将其作为可能的解决方案发布：

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

我知道使用CSS border-radius会对所有非浏览器更有意义，所以如果你能让它工作，那么它可能是值得的。

IE8网站麻烦

1

2

4 个答案: