左侧导航仅在 IE7 中崩溃

好的！所以我做了这个导航栏，它在除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;
}

您仍然有无效的 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>  <!-- <<< the entire child UL is inside the LI where it belongs -->
            <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 one closes the LI item -->
    ...
    <li class="nav_bottom">&nbsp;</li>
</ul>

通过 W3C 验证程序运行您的页面。

相关内容

最新更新

热门标签：