CSS 在 chrome、safari 和 Internet Explorer 中看起来不同

Question

此菜单位于 ASP.NET 导航中。在 Chrome 和 Safari 上，它看起来像这样:

但在 Internet Explorer 上，它看起来不错:

这是我的 CSS:

div.hideSkiplink {
    background-color: #000;
    width: 100%;
    display: block;
    height: 42px;
    font-size: large;
    font-weight: bold;
    background: transparent url('../images/redslate_background.gif') repeat-x left top;
    font-family: 'Times New Roman' , Times, serif;
    text-transform: uppercase;
    color: #000000;
}

div.menu ul {
    position: absolute;
    margin: 0px;
    padding: 0;
    list-style-type: none;
    width: auto;
}

div.menu ul li {
    display: block;
    float: left;
    margin: 0 1px 0 0;
}

div.menu ul li a {
    display: block;
    float: left;
    color: #000000;
    text-decoration: none;
    padding: 14px 22px 0 22px;
    height: 42px;
}

div.menu ul li a:hover, div.menu ul li a.current {
    color: #fff;
    background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}

不知何故，在 Chrome 和 Safari 上，菜单似乎在背景下方。我该如何解决？

Answer 1

遗憾的是，这是 Internet Explorer 中的一个常见问题。 Web 开发人员非常讨厌它，因为它总是会发生!然而，如果您希望您的站点在所有 Web 浏览器中都可以打开，则应遵循某些规则。请看这个:Internet and CSS issues

有数百篇文章与这个主题相关，所以你应该用谷歌搜索

• IE 和 CSS 兼容性
• IE 和 CSS 问题