4

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

IE8 的问题

菜单应有的样子

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

4 回答 4

2

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

现在...问题是您在白色按钮背景上使用具有透明度的 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;
}
于 2012-07-28T08:21:02.327 回答
0

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

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

这可能会帮助你http://css-tricks.com/ie-background-rgb-bug/

浏览器支持：点击这里

于 2012-07-28T08:48:12.553 回答
0

Internet Explorer 8 及更早版本无法呈现Alpha 透明度。你需要为他们使用后备（简单#fff的 imo 会很好）

于 2012-07-28T08:27:49.793 回答
0

您可以在 Internet Explorer 6 - 8 中使用 CSS3 PIE ！！！

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

从网站：

CSS Level 3 带来了一些非常强大的样式功能。圆角、柔和的阴影、渐变填充等等。这些是我们的设计师朋友喜欢使用的元素类型，因为它们使网站具有吸引力，但实施起来困难且耗时，涉及复杂的精灵图像、额外的非语义标记、大型 JavaScript 库和其他可爱的 hack。

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

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

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

希望这可以帮助！:)

于 2012-07-28T09:07:33.520 回答