IE8网站问题
我正在开发一个网站，但找不到解决 IE8 或更高版本下某些问题的方法。
首先，这是临时站点位置：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;
}
In 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();
});
});
欢迎任何帮助！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
IE8 仍然无法正确获取 PNG 透明度。这就是您在菜单突出显示上看到黑色边框的原因。有一篇博客文章（其中一篇）解释了这个问题。因此，这可能是导致登录失败和菜单突出显示周围黑色边框问题的原因。我仍在研究这个问题，如果我找到一个好的方法来做到这一点，我将编辑这个答案。
编辑：所以，这里是一个演示，只是关于 在 IE8 中适用于我，在 Chrome 11 中也能完美工作。我在 IE8 中仍然看到轻微的边框，但我希望它对您来说足够好。在我看来，像素完美的跨浏览器设计几乎不可能达到您想要的效果，除非您想依赖更多的 JavaScript 或（我敢说）Flash。几年前，我确实制作了一个可在 IE6 中运行的 PNG alpha 悬停突出显示，但它依赖于自定义 JavaScript、
clear.gif和特定的 CSS 类。可能有更好的方法来做到这一点，但这个解决方案非常轻量级，因为它只依赖于 jQuery 的动画和一些 IE 特定的 CSS。如果您关心有效的“主”CSS，您可能希望将 IE 样式放在单独的文件中。顺便说一句，如果您有不透明的背景，这将非常简单 - 您只需将
background-color属性添加到设置为颜色的即可你的背景和透明度会起作用。还有另一个问题我之前读过，还可以在此处查看很好的答案，解释了为什么 IE 无法为透明 PNG 制作动画。我使用了这些答案中的一些建议来帮助解决我的问题。希望这有帮助！
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.gifand 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-colorproperty 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!
对于您的“登录/注册”透明度问题，请尝试从您的头脑中删除此行
似乎 IE 不喜欢它。
For your 'Login/register' transparency issue try to remove this line from your head
<script>:It seems like IE doesn't like it.
jquery 角插件似乎会导致第一问题
如果我运行
$(".jquery-corner").css("display", "none");，它清理了背景问题。不确定它是否也与按钮悬停有关，但我首先可能会摆脱 jquery 角落。
the jquery corner plugin seems to be causing the 1st issue, if I run
$(".jquery-corner").css("display", "none");it cleans up the background issue. Not sure if it also relates to the button hover overs but I'd start by maybe getting rid of jquery corner first.
无论出于何种原因，我对 htc 文件都没有太多运气，但我想我不妨将其作为可能的解决方案发布：
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
我知道使用 CSS border-radius 会带来更多效果对于所有非 ie 浏览器都有意义，所以如果你能让它工作，那可能是值得的。
I've never had much luck with htc files for whatever reason but I figured I might as well post this as a possible solution:
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I know using CSS border-radius would make much more sense for all non-ie browsers, so if you can get it to work it might be worth it.