下拉导航菜单与ie无法正常工作

Question

我正在制作下拉导航菜单。一些如何与IE 8及较小版本无法正常工作。我想这可能是IE上百分比宽度的问题。

这是我的HTML

![here is the snapshot][3]
#wrap {
    width: 100%;
    height: 30px;
    margin: 0px;
    z-index: 10000;
    position: relative;
    background-color: #cccccc;
}
.navbar {
    list-style:none;
    height: 20px;
    padding: 0;
    position: absolute;
    margin:0;
}
.navbar li li {
    white-space:nowrap;
    width:100%;
    display:block;
}
.navbar li {
    width:20%;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 12px/1em Arial, Verdana, Helvetica;
    padding: 0;
    margin: 0;
    background-color: #cccccc;
}
.navbar li a:hover {
    color:White;
    background-color: #660099;
}
.navbar a {
    padding:9px 0;
    border-left: 1px solid #9b9b9b;
    border-right: 1px solid #9b9b9b;
    text-decoration: none;
    color: #660099;
    display: block;
}
.navbar li:hover, .navbar li.hover, .navbar a:hover {
    background-color: #cccccc;
}
.navbar li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
}
.navbar li:hover ul, .navbar li.hover ul {
    display: block;
}
.navbar li ul li {
    background-color: #cccccc;
}
.navbar li ul li a {
    border-left: 1px solid #9b9b9b;
    border-right: 1px solid #9b9b9b;
    border-top: 1px solid #9b9b9b;
    border-bottom: 1px solid #9b9b9b;
}
.navbar li ul li a:hover {
    background-color: #660099;
    color:white;
}

<div id="wrap">
    <ul style="width:100%" class="navbar">
        <li><a href="#Home">Home</a>

        </li>
        <li><a href="#parent1">parent1</a>

        </li>
        <li><a href="#parent2">parent2</a>

            <ul class="childNav">
                <li><a href="#child1">child1sdfsfgggggggggggffdgdssdfgffgd</a>

                </li>
                <li><a href="#child2">child2sdfgfsdgfdsgfghgjgjkgghjg</a>

                </li>
            </ul>
        </li>
        <li><a href="#parent3">parent3</a>

            <ul class="childNav">
                <li><a href="#Support">child1</a>

                </li>
                <li><a href="#Support">child2</a>

                </li>
            </ul>
        </li>
        <li><a href="#Support">contactus</a>

        </li>
    </ul>
</div>

感谢任何帮助。

Answer 1

尝试使用reset.css文件删除特定于浏览器的默认设置。制作一个适合您需求的产品。 This one是一个好的开始。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

我个人也经常这样做：

html, body { width: 100%; height: 100%; }

JSfiddle有一个内置的重置CSS选项。我试过了your page there，正如您所看到的，滚动条会显示出来。这是因为您将导航的宽度设置为100％，但您也给了它一个余量。边距，边框和滚动条被视为宽度以外。 This demo将帮助您解决这个问题。

解决此问题的一种方法是在#wrap元素上使用width: calc(100% - 10px);，它将对抗每个5px的左右边距，但它与IE8不兼容。因此，我建议将条形稍微缩小，或将其放入另一个设置为100％宽度但没有边距的包装中。嗯，这似乎不起作用。也许还有别的......