个人中心
gpt4 book ai didi

html - 导航栏适用于 chrome 和 firefox，但不适用于 Internet Explorer

转载 作者：太空宇宙 更新时间：2023-11-04 04:27:31 26 4
gpt4 key购买 nike

我正在尝试制作一个网站，当我对其进行测试时，导航栏无法与 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/

26 4 0
文章推荐： python - sendmail成功，但python smtplib连接失败
文章推荐： linux - 在 initramfs 中使用 perl 重定向系统调用的输出
文章推荐： linux - USVN 不工作
文章推荐： linux - git pull 支持继续下载吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com