Html 导航栏IE7的困境

我的导航栏在IE7中显示时是一团乱麻。我对这种传统的编码有点陌生，从我所读到的内容来看，除了其他一些问题外，还有伪状态、z索引和绝对位置的问题

我尝试过各种方法，试图让它做出正确的反应，但没有乐趣

我也试过使用

<!--[if IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

---

谢谢你的帮助

希望这可以帮助其他人

在我的例子中，H2标签上的相对定位造成了巨大的破坏

我在IE中使用开发模式，直到我能够得到我得到的结果，将代码弹出到一个新的css文件中，并使用IF IE条件调用该样式表

它不像在以后的版本中那么好，但它的视觉效果更好：

---

感谢所有帮助过你的人

你能解释一下IE7中悲惨的混乱到底是什么样子吗？嗯，选择框已经掉下来了，在h2名称后面。如果我从H2中删除relative，它会有所帮助，从A标记中删除float也会有所帮助，但我无法使其完美。Re IE7.js-请注意，IE7.js旨在使IE6像IE7一样工作。如果你想让IE7像IE8或IE9一样工作，你需要使用IE8.js或IE9.js，而不是IE7.js。此外，如果你使用HTML5元素，那么你必须使用HTMLSIV.js或Modernizer.js，否则IE8和更早版本会崩溃，这可能是你的主要问题。此外，IE7不支持以下：：before，：after，transition，box shadow，rgba颜色。。。。

<aside>
    <div class="module blue">
        <h2 class="wtf">Index<a href="../index.php">Select</a></h2>
        <br/>
        <h2 class="wtf">Admin Home<a href="../admin.php">Select</a></h2>
    </div>
</aside>

aside { display: block; }

h2 {
    font-size: 26px;
    position: relative;
}

aside {
    padding-top:10px;
    width: 18%;
    float: left;
    min-width:250px;
}

.navMenu{
    display:block;
    padding-top:10px;
    width: 18%;
    float: left;
    min-width:250px;
}

.module {
    background: #eee;
    margin: 0 0 10px 0;
}
.module h2 {
    background: #ccc;
    line-height: 2;
    padding: 0 0 0 10px;
    font-size: 16px;
    margin: 0 0 4px 0;
    box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
}
.module h2 a {
    float: right;
    position: relative;
    text-decoration: none;
    color: #333;
    padding: 0 10px;
        border-left: 5px solid white;
        -webkit-transition: padding 0.1s linear;
        -moz-transition: padding 0.1s linear;
        -ms-transition: padding 0.1s linear;
        -o-transition: padding 0.1s linear;
    }

    .module h2 a:hover {
        padding: 0 14px;
    }
    .module h2 a:active {
        padding: 0 16px;
    }

    .module h2 a:before,
    .module h2 a:after {
      content: "";
    position: absolute;
        top: 50%;
        width: 0;
        height: 0;
    }
    .module h2 a:before {
        left: -12px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid white;
        margin-top: -8px;
    }

    .module.blue h2 a {
        background: #a2d6eb;
    }
    .module.blue h2 a:hover {
        background: #c5f0ff;
    }
    .module.blue h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #a2d6eb;
        margin-top: -6px;
    }
    .module.blue h2 a:hover:after {
        border-right-color: #c5f0ff;
    }