我正在尝试制作一个网站，当我对其进行测试时，导航栏无法与 Internet Explorer 一起使用，但它可以与 Chrome 和 Firefox 一起使用。在 IE 中，将鼠标悬停在上方时，栏不会下降。
这是 html:
<head><!--CSS Linking, Icon, Title, etc.//-->
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<nav><!-- Creates the Navigation Bar //-->
<ul>
<li><a href="/home">Our Troop</a>
<ul>
<li></li>
<li><a href="/about/location">About Us</a></li>
<li><a href="/about/history">Calendar</a></li>
<li><a href="/about/meetings">Meetings</a></li>
<li><a href="/about/joining">How to Join</a></li>
<li><a href="/about/contact">How to contact us</a></li>
</ul>
</li>
<li><a href="/leadership">Leadership</a>
<ul>
<li><a href="/leadership">Leadership roles in our Troop</a></li>
<li><a href="/leadership/youth">Current Youth Leadership</a></li>
<li><a href="/leadership/adult">Current Adult Leadership</a></li>
</ul>
</li>
<li><a href="/scouting">About Scouting</a>
<ul>
<li></li>
<li><a href="/scouting/whatis">What is Scouting</a></li>
<li><a href="/scouting/history">History of Scouting</a></li>
<li><a href="/scouting/ranks">Scouting Ranks</a></li>
<li><a href="/scouting/oath_law">The Scout Oath and Law</a></li>
<li><a href="/scouting/sign_salute">The Scout sign and Salute</a></li>
<li><a href="/scouting/motto_slogan">The Scout Motto and Slogan</a></li>
<li><a href="/scouting/uniform">The Scout Uniform</a></li>
</ul>
</li>
<li><a href="/skills">Skills and Scoutcraft</a>
<ul>
<li><a href="/skills/full_listings">Complete Listing of Skill Guides</a></li>
<li><a href="/skills/camping">General Camping</a></li>
<li><a href="/skills/firstaid">Firstaid</a></li>
<li><a href="/skills/ropecraft">Ropes, Knots, and Lashing</a></li>
<li><a href="/skills/orienteering">Orienteering</a></li>
<li><a href="/skills/backpaking">Backpacking</a></li>
<li><a href="/skills/firemaking">Firemaking</a></li>
<li><a href="/skills/tools">Tools</a></li>
<li><a href="/skills/wildlife">Wildlife</a></li>
<li><a href="/skills/watercraft">Watercraft</a></li>
</ul>
</li>
<li><a href="/skills">More Skills and Scoutcraft</a>
<ul>
<li><a href="/skills/full_listings">Complete Listing of Skill Guides</a></li>
<li><a href="/skills/camping">hiking</a></li>
<li><a href="/skills/firstaid">Being prepared</a></li>
<li><a href="/skills/ropecraft">cooking outdoors</a></li>
<li><a href="/skills/orienteering">shelter building</a></li>
<li><a href="/skills/backpaking">equipment</a></li>
<li><a href="/skills/firemaking">Firemaking</a></li>
<li><a href="/skills/tools">Tools</a></li>
<li><a href="/skills/wildlife">Wildlife</a></li>
<li><a href="/skills/watercraft">Watercraft</a></li>
</ul>
</li>
<li><a href="/other">Other</a>
<ul>
<li><a href="/skills/full_listings">Links</a></li>
<li><a href="/skills/camping">Uniform Chest</a></li>
<li><a href="/skills/forms">Forms</a></li>
</ul>
</li>
</ul>
</nav>
这是CSS:
/* START NAV MENU */
nav {
background-color: #004700;
height:40px;
}
nav ul {
font-family: Arial, Verdana;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {/* top level*/
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #165016;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
text-align:center;
}
nav ul li a:hover { /* highlighted top level items */
background: #617F8A;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {/* sub items*/
float: none;
font-size: 15px;
}
nav ul li ul li a:hover { /* highlighted sub items*/
background: #617F8A;
}
nav li:hover li a:hover { /*highlighted subitems*/
background: #95A9B1;
}
nav ul li ul li a {/*sub items*/
text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}
/* END NAV MENU */
最佳答案
您没有指定您正在测试的 IE 版本，但您的代码似乎在 IE9 和更高版本中运行良好，所以我假设您在 IE8 中进行测试。
鉴于此，我认为有一个主要问题会破坏您的网站:
<nav> IE8 或更早版本不支持其他新的 HTML5 元素作为标准。使用它们会破坏您的布局并导致其他故障。
您有两个选择:要么替换 <nav>和任何其他具有旧式 <div> 的 HTML5 元素元素，或者使用类似 html5shiv 的 polyfill或 Modernizr ，两者都将解决 IE8 中的问题并使这些元素正常工作。
希望对您有所帮助。
[在 OP 澄清他的 IE 版本为 IE10 后进行编辑]
另一种可能是它以兼容模式或怪癖模式显示页面。
您可以通过按 F12 调出 Dev Tools 窗口来检查浏览器模式；模式信息将显示在窗口的顶部。如果它处于 Quirks 模式或兼容模式(即，如果它处于 IE10 标准模式以外的任何模式)，那么很可能就是这个原因。
如果它处于怪癖模式，那是因为您的 HTML 不符合标准。大多数时候，在页面顶部添加一个有效的文档类型可以解决这个问题(您可以使用 <!DOCTYPE html> 作为最简单的有效文档类型)。您还应该通过 W3C Validator 运行它来检查 HTML 中的其他错误。并修复它报告的错误。 (如果您发布的代码是您的全部代码，那么您缺少了 <html> 和 <body> 初学者标签，这绝对不好)。
如果它处于兼容模式(例如“IE7 标准”)，那么您可以通过添加 X-UA-Compatible 来解决这个问题元标记到您的 <head>部分。 (请参阅 my answer here 了解更多信息，了解为什么会发生这种情况以及如何解决它)。
关于html - 导航栏适用于 chrome 和 firefox，但不适用于 Internet Explorer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17964636/