Question

确定！所以我制作了这个导航栏，它在除IE7之外的所有浏览器中都能很好地工作。这是一个左侧导航，由于某种原因，它在IE7中崩溃，但每个其他浏览器都显示它很好。

这是html。

    <!doctype html>
    <html> 
    <head>
       <title>Test</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="reset.css">
       <link rel="stylesheet" href="styles.css">
</head> 
    <body>
<ul class="navbar">
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/products/">Products</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Categories</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/email/">Email</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">New Blast</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Blast</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/reports/">Reports</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">By Month</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">By Type</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/recipes/">Recipes</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Recipes</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/television/">Television</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View List</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head blog_head"><div class="navhd_outline"><a href="/admin/blog/">Blog</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Posts</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_bottom">&nbsp;</li>
</ul>
    </body>
    </html>

这是CSS。

.navbar {
    float: left;
    background-color: #4d89d1;
    background-repeat: no-repeat;
    background-position: 18px 0px;
    top: -25px;
    width: 200px;
    margin-top: 20px;
    margin-left: 30px;
    padding-top: 25px;
    padding-bottom: 30px;
}

.nav_head {
    margin: 0 auto;
    padding: 1px;
    height: 36px;
    list-style: none;
}

.nav_head a {
    font-size: 15px;
    color: #900606;
}

.nav_head a:hover {
    color: #f5bf2b;
}

.navhd_outline {
    margin: 1px;
    padding-top: 8px;
    padding-left: 40px;
    padding-bottom: 22px;
    border: 1px dashed #f5bf2b;
    width: 154px;
    height: 2px;
}

.nav_subhead {
    padding: 1px;
    background-color: #900606;
    height: 36px;
    list-style: none;
    margin-left: 25px;
    width: 155px;
    text-align: right;
}

.nav_subhead a {
    color: #ffffff;
    text-decoration: none;
    padding-right: 10px;
}

.nav_subhead a:hover {
    color: #f5bf2b;
}

.navsub_outline {
    margin: 1px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    border: 1px dashed #f5bf2b;
    width: 131px;
    height: 2px;
}

.nav_bottom {
    height: 30px;
    background-position: 33px 0px;
    background-repeat: no-repeat;
}

Answer 1

您的HTML仍然无效。问题在每一个<li>重复出现，所以我只展示第一个......

<ul class="navbar">

    <li class="nav_head">
        <div class="navhd_outline"><a href="/admin/products/">Products</a></div>
    </li>  <!-- <<< this one closes the LI item -->
        <ul>
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">View Categories</a></div>
            </li>
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">Add/Remove</a></div>
            </li>
        </ul>
    </li>  <!-- <<< this is presently an extra one outside of the LI item -->

    ...
    <li class="nav_bottom">&nbsp;</li>

</ul>

每个</li>项目仍有额外的结束<li>标记。内部<ul>需要包含在里面 <li></li>，其中在之外以及另一个</li>。删除</li>标记，如下所示...

<ul class="navbar"> <li class="nav_head"> <div class="navhd_outline"><a href="/admin/products/">Products</a></div> <ul>  <li class="nav_subhead"> <div class="navsub_outline"><a href="#">View Categories</a></div> </li> <li class="nav_subhead"> <div class="navsub_outline"><a href="#">Add/Remove</a></div> </li> </ul> </li>  ... <li class="nav_bottom"> </li> </ul>

通过W3C Validator。
运行您的网页

左侧导航仅在IE7中揉皱

1 个答案: