IE8站点故障 [英] IE8 site trouble

问题描述

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

all，here is temporary site location：（众多中的一个）解释了该问题。所以这可能是什么导致您的问题与破碎的登录和黑色边框周围的菜单高亮。我仍然看看这个问题，如果我找到一个好的方法来做这个问题，将编辑这个答案。

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

顺便说一下，如果你有一个不透明的背景，这将是很容易 - 你可以只添加一个 background-color 属性设置为< li> 设置为背景的颜色和透明度将工作。有另一个问题 ，我也会在此处查看优秀的答案解释为什么IE有麻烦动画一个透明的PNG。我已经使用这些答案中的一些建议来帮助我的解决方案。

希望这有助于！

I'm developing a website and I can't find the ways to resolve some stuff under IE8 or higer.

First of all, here is temporary site location: http://capitalpay.co.uk/.

1

---

So the troubles are: Login/register form has black rectangle instead of transparency:

And the style is:

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

    text-align: center;
}

And here is that background (a bit ugly):

2

---

My meny highlights bad... I know the code is'nt the best, but it works in another browsers

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

In span element there is menu text. I made z-index: 5000 for it to make over it absolute div with transparency, but leave text above it.

And here is JS (Jquery) code I'm using to animate menu:

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

Any help is welcome!

解决方案

IE8 still does not get PNG transparency correct. This is why you are seeing black borders on the menu highlights. There is a blog post (one of many) explaining the problem. So this is probably what is causing your issues with the broken login and black border around the menu highlight. I'm still having a look at this problem and will edit this answer if I find out a nice way to do this.

Edit: So, here is a demo of something that just about works for me in IE8 and works perfectly in Chrome 11. I am still seeing a slight border in IE8 but I hope it's good enough for you. In my opinion, pixel perfect cross browser design is almost impossible with the kind of effects you want, unless you want to rely on even more JavaScript or (dare I say) Flash. I did make a PNG alpha hover highlight a couple of years ago that worked in IE6 but it relied on custom JavaScript, a clear.gif and specific CSS classes. There may be a better way to do this with but this solution is quite lightweight as it only relies on jQuery for the animation and some IE specific CSS. You may want to put the IE styles in a separate file if you care about a valid "main" CSS.

By the way, if you had an opaque background, this would be very easy - you could just add a background-color property to the <li> set to the color of your background and the transparency would work. There is another question that I'd read before and also see here for an excellent answer explaining why IE has trouble animating a transparent PNG. I've used some of the suggestions in those answers to help with my solution here.

Hope this helps!

这篇关于IE8站点故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！