CSS菜单看起来不太好用IE8

Question

出于某种原因，我的水平菜单在IE8上看起来非常糟糕（也可能是之前的版本）（参见第一张图片）。最新版本的safari，firefox和chrome没有问题（见第二张图片）。 知道为什么以及如何解决这个问题？网站链接http://goo.gl/nEx5e 感谢

CSS代码：

#nav
{
    right:2%;
    list-style:none;
    position:fixed;
    /* float:right; */
    top:30px;
    z-index:1000;
    /* width:520px; */
}

#nav > li {
    display: inline-block;
    /* dirty hack for IE7 */
    *display: inline;
    *zoom: 1;
}

#nav a
{
    float:left;
    top:30px;
    display:inline-block;
    font-size:11px;
    margin-left:5px;
    margin-right:5px;
    padding-left:10px;
    padding-right:10px;
    text-decoration:none;
    height:24px;
    color:#666;
    line-height:24px;
    text-align:center;
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    background:rgba(255,255,255,0.9);
    text-transform:uppercase;
}

#nav a:hover
{
    background:#dedede;
}

#nav .current a
{
    background:#666;
    color:#ededed;

Answer 1

在您阅读我的答案之前，如果您对发布的问题接受 ，则应该考虑人们不太可能回答您的问题。这通常被认为是粗鲁的。

现在......问题是你在白色按钮背景上使用RGBA透明度。

IE8及以下版本无法处理透明色。您需要使用opacity: 0.x和filter: Alpha(opacity='xx')手动设置透明度。

请注意，opacity: 0.8等于filter: Alpha(opacity=80)。

#nav a
{
    float:left;
    top:30px;
    display:inline-block;
    font-size:11px;
    margin-left:5px;
    margin-right:5px;
    padding-left:10px;
    padding-right:10px;
    text-decoration:none;
    height:24px;
    color:#666;
    line-height:24px;
    text-align:center;
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    background: white;           // <------ !
    opacity: 0.8;                // <------ !
    filter: Alpha(opacity='80'); // <------ !
    text-transform:uppercase;
}

Answer 2

Internet Explorer 8及更早版本can't render alpha-transparency。你需要为他们使用一个后备（普通#fff会很好的imo）

Answer 3

IE8 及以下版本无法呈现 alpha-transparency 。 所以你可以像这样使用：

div {
  background-color: #xxxxxx;
  background-color: rgba(x,x,x,x);
}

这可能会对您有所帮助http://css-tricks.com/ie-background-rgb-bug/

对于浏览器支持：click here

Answer 4

您可以将CSS3 PIE用于Internet Explorer 6 - 8 !!!

PIE 使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能。

来自网站：

  

CSS Level 3带来了一些令人难以置信的强大样式功能。圆角，柔和阴影，渐变填充等。这些是我们的设计师朋友喜欢使用的元素，因为它们可以制作有吸引力的网站，但实现起来既困难又耗时，包括复杂的精灵图像，额外的非语义标记，大型JavaScript库以及其他可爱的黑客。 / em>的

在此处查看有关为IE 8实现它的更多信息：http://css3pie.com/

对于不透明度，如Anders Holmström所述，您可以在样式中使用filter，并使用子导航元素的白色背景：

filter: Alpha(opacity='80');
background: #fff;

希望这有帮助！ ：）