CSS菜单看起来不太好用IE8

2023年3月4日 182次阅读

出于某种原因,我的水平菜单在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;

最佳答案 在您阅读我的答案之前,您应该考虑如果您不接受您发布的问题的答案,那么人们将不太可能回答您的问题.这通常被认为是粗鲁的.

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

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

请注意,不透明度：0.8等于filter：Alpha(不透明度= 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;
}
点赞