如何在 IE7 及更低版本中修复此 css 错误？答案

【问题标题】：How to fix this css error in IE7 and lower?如何在 IE7 及更低版本中修复此 css 错误？
【发布时间】：2011-11-09 17:12:47
【问题描述】：

我最近在我的网站上添加了一些 css，它在除 IE 7 及更低版本之外的所有浏览器中都运行良好，我不太确定为什么而且我还不是 css 大师（还不是 css 大师）而且我的 css 可能是错误的，但是你能解释一下是什么让 IE7 和更低版本搞砸了网站的外观吗？如果你在 IE8 或任何其他浏览器和 IE7 中比较它，你就会明白我在说什么。你能指出问题出在哪里吗？

网页：http://inelmo.com/inelmo

侧边栏的CSS：（我只包含了这个，因为一旦我添加了这部分代码就会出现问题）

#sidebar {
    width: 440px;
    float: right;
}

/* Navigation Menu */
#navigationMenu {
    width: 50px;
    position: absolute;
    z-index: 99;
}

#navigationMenu li {
    list-style: none;
    height: 39px;
    padding: 2px;
    width: 40px;
}

#navigationMenu span {
    width: 0;
    left: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 39px;

    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    -ms-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a {
    background: url("../images/nav_bg.png") no-repeat;
    height: 39px;
    width: 38px;
    display: block;
    position: relative;
    text-decoration: none;
}

#navigationMenu a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}

#navigationMenu a:hover {
    text-decoration: none;
}

/* Home Button */
#navigationMenu .home {
    background-position: 0 0;
}

#navigationMenu .home:hover {
    background-position: 0 -39px;
}

#navigationMenu .home span {
    background-color: #7da315;
    color: #3d4f0c;
    text-shadow: 1px 1px 0 #99bf31;
}

/* Categories Button */
#navigationMenu .categories {
    background-position: -38px 0;
}

#navigationMenu .categories:hover {
    background-position: -38px -39px;
}

#navigationMenu .categories span {
    background-color: #1e8bb4;
    color: #223a44;
    text-shadow: 1px 1px 0 #44a8d0;
}

/* Top Button */
#navigationMenu .top {
    background-position: -76px 0;
}

#navigationMenu .top:hover {
    background-position: -76px -39px;
}

#navigationMenu .top span {
    background-color: #c86c1f;
    color: #5a3517;
    text-shadow: 1px 1px 0 #d28344;
}

/* AntiTop Button */
#navigationMenu .antiTop {
    background-position: -114px 0;
}

#navigationMenu .antiTop:hover {
    background-position: -114px -39px;
}

#navigationMenu .antiTop span {
    background-color: #af1e83;
    color: #460f35;
    text-shadow: 1px 1px 0 #d244a6;
}

/* Logo styling */
#logo {
    width: 390px;
    margin: 0 0 0 50px;
    position: absolute;
    z-index: -1;
}

/******/
#sideWrapper {
    width: 437px;
    background: url("../images/sidebar_strip.png") repeat-x;
    padding: 15px 0 0 3px;
    margin: 190px 0 0 0;
}

【问题讨论】：

在 IE 7 中不应该发生什么？
如果我们能看到正在发生的事情会容易得多。
我会尽快添加，抱歉
需要更具体 - 错误是什么？在哪里？有截图吗？有现场演示/样品吗？有 html 代码与我们分享吗？您基本上是在寻求帮助而没有说出问题。
我添加了一个网页，抱歉我忘记了 (-.-) 我正在截屏

标签： css internet-explorer position appearance

【解决方案1】：

使用float:xxx 时，您还应该附加display: inline 以修复旧的IE 行为。

在 IE6 中 :hover 仅适用于 <a>，修复：http://peterned.home.xs4all.nl/csshover.html

您似乎使用了position: absolute; 而没有实际设置top/left/等。

使用某种“pngfix”（如http://www.twinhelix.com/css/iepngfix/）来使用透明png。

使用谷歌和http://haslayout.net/ 之类的网站来寻找有趣的错误。

【讨论】：

哪一个是问题？ :)

【解决方案2】：

使用 CSS 重置

将this code 添加到 CSS 的顶部

【讨论】：

【解决方案3】：

如果没有您的代码示例，我可以向刚开始的人建议的最好方法是逐行注释掉上面的 CSS，直到找到破坏布局的确切 CSS。我使用的另一个技巧是为所有内容添加背景颜色，以便您可以直观地看到事情发生的地方。

【讨论】：