0

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

3 回答 3

3

您尚未指定您正在测试的 IE 版本,但您的代码在 IE9 及更高版本中似乎可以正常工作,因此我假设您正在 IE8 中进行测试。

鉴于此,我可以看到一个主要问题会破坏您的网站:

<nav>IE8 或更早版本不支持将其他新的 HTML5 元素作为标准。使用它们会破坏您的布局并导致其他故障。

你有两个选择:要么<nav>用旧样式的元素替换 和任何其他 HTML5 元素<div>,要么使用像html5shivModernizr这样的 polyfill ,这两者都将解决 IE8 中的问题并使这些元素正常工作。

希望有帮助。

[在 OP 将他的 IE 版本澄清为 IE10 后编辑]

另一种可能性是它以兼容模式或怪癖模式显示页面。

您可以通过按 F12 调出 Dev Tools 窗口来检查浏览器模式;模式信息将显示在窗口顶部。如果它处于 Quirks 模式或兼容模式(即,如果它处于 IE10 标准模式以外的任何模式),那么很可能这是原因。

如果它处于怪癖模式,那是因为您的 HTML 不符合标准。大多数情况下,在页面顶部添加一个有效的文档类型可以解决这个问题(您可以将<!DOCTYPE html>其用作最简单的有效文档类型)。您还应该通过W3C Validator运行 HTML并修复它报告的错误来检查 HTML 中的其他错误。(如果您发布的代码是您的整个代码,那么您缺少用于启动器的<html>and<body>标记,这绝对不好)。

如果它处于兼容模式(例如“IE7 标准”),那么您可以通过向您的部分添加X-UA-Compatible元标记来解决此问题。<head>(有关为什么会发生这种情况以及如何解决此问题的更多信息,请参见我的答案)。

于 2013-07-31T09:58:43.800 回答
0

我认为您必须查看css参考。在w3schools.com上查看 IE 和其他浏览器支持的 css

举个例子,要让 " border-radius" 在 Opera 或 safari 中工作,你必须添加一个新行:-webkit-border-radius(safari and chrome) 和-o-border-radius(opera)。
IE 对 css 的支持比其他浏览器少,除了 IE 10 和更高版本比以前的 IE 更好。可能有帮助:D

于 2013-07-31T08:00:43.740 回答
-1

作为在 Opera 或 safari 中工作的示例border-radius,您必须添加一个新行:

-webkit-border-radius //(safari and chrome)

-o-border-radius //(opera)

IE 对 css 的支持比其他浏览器少,除了 IE 10 和更高版本,它们比以前版本的 IE 更好。

于 2016-05-30T11:42:49.793 回答