Html 下拉导航菜单不能与ie正常工作

我正在制作下拉导航菜单。有些人认为它在IE 8及以下版本中无法正常工作。我想这可能是IE上的百分比宽度问题

这是我的HTML

![这是快照][3] 包裹{ 宽度：100%； 高度：30px； 边际：0px； z指数：10000； 位置：相对位置； 背景色：中交； } navbar先生{ 列表样式：无； 高度：20px； 填充：0； 位置：绝对位置； 保证金：0； } 李娜先生{ 空白：nowrap； 宽度：100%； 显示：块； } 李国宝先生{ 宽度：20%； 浮动：左； 文本对齐：居中； 列表样式：无； 字体：普通粗体12px/1em Arial，Verdana，Helvetica； 填充：0； 保证金：0； 背景色：中交； } 李娜：悬停{ 颜色：白色； 背景色：660099； } 纳瓦尔先生{ 填充：9px0； 左边框：1px实心9b9b； 右边框：1px实心9b9b； 文字装饰：无； 颜色：660099； 显示：块； } .navbar li:hover、.navbar li.hover、.navbar a:hover{ 背景色：中交； } navbar li ul先生{ 显示：无； 高度：自动； 保证金：0； 填充：0； } .navbar li:hover ul、.navbar li.hover ul{ 显示：块； } 李国宝先生{ 背景色：中交； } navbar li ul li a.先生{ 左边框：1px实心9b9b； 右边框：1px实心9b9b； 边框顶部：1px实心9b9b； 边框底部：1px实心9b9b； } navbar li ul li a:悬停{ 背景色：660099； 颜色：白色； }

---

尝试使用reset.css文件删除特定于浏览器的默认设置。做一个适合你需要的。这是一个好的开始

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%; }

JSFIDLE有一个内置的重置CSS选项。我试过了，如你所见，一个滚动条出现了。这是因为你把你的导航宽度设置为100%，但你也给了它一个余量。边距、边框和滚动条被视为超出宽度。我会帮你处理的

---

解决这个问题的一种方法是使用宽度：calc100%-10px；在wrap元素上，它将分别对应5px的左右边距，但它与IE8不兼容。所以我建议把这个条稍微小一点，或者把它放在一个额外的包装里，这个包装设置为100%宽度，但没有边距。嗯，那好像不管用。也许还有其他原因……

它工作得有多不正常？有什么东西出现吗？是的，就像最后一个父项，例如：下一行显示的代码中的“联系我们”。我已经添加了快照，请检查它@JacqueGoupil@sdcr：不，我没有一个实时站点。你能在IE7中测试它吗？你能看到difference@sdcr：嗯，这很奇怪。谢谢你的详细解释，即使我将边距改为0px，它仍然不起作用