html - 下拉导航菜单无法与 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% 宽度但没有边距。 嗯，这似乎不起作用。或许还有别的……