HTML导航栏有时在IE中打破(在IE8、9和10中进行了测试)

Question

我的网页顶部有一个导航栏，该栏并不总是在IE中正确显示。导航栏在Chrome和Firefox中总是看起来不错。

使用IE时，如果我点击"后面"按钮，刷新页面或访问页面第二次导航菜单悬停停止正常工作。但是，如果我删除浏览器历史记录并再次访问该页面，则只有在我再次采取上述操作之前，它才能做到。

。

我尝试禁用缓存，但问题仍然存在，兑现也关闭了。当IE停止显示我的下拉物品时，标头保持了所有其他CSS格式（仍然是橙色，仍位于左上角，仍然令人沮丧）。

但是，我注意到，当我处于开发人员模式时，我就会停止遇到这个问题。只要我保持开发人员模式打开（不运行），标头整个时间都可以正常工作。一旦我关闭开发人员模式，标题恢复被打破。

我不能指望每个人都打开开发人员模式只是为了查看我的网页，这里的任何帮助都将不胜感激。

header.css

    /* Main menu settings */
#header {
    clear:both;
    float:left;
    width:100%;
    font-family:Verdana, Geneva, sans-serif; /* Menu font */
    font-size:90%; /* Menu text size */
    z-index:1000; /* This makes the dropdown menus appear above the page content below */
}
/* Top menu items */
#header ul {
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    position:fixed;
    left:0;
    top:0;
    background-color: #ff7f26;
}
#header ul li {
    float:left;
    position:relative;
    left:0;
    top:0;
    border-right:1px solid #000;
}
#header ul li a {
    display:block;
    margin:0;
    padding:.6em .5em .4em;
    font-size:1em;
    line-height:1em;
    background:#ff7f26;
    text-decoration:none;
    color:black;
    font-weight:bold;
}
#header ul li.active a {
    color:#fff;
    background:#ff7f26;
}
#header ul li a:hover {
    background:#ff7f26; /* Top menu items background colour */
    color:#fff;
}
#header ul li:hover a,
#header ul li.hover a { /* This line is required for IE 6 and below */
    background:#ff7f26; /* Top menu items background colour */
    color:#fff;
}
/* Submenu items */
#header ul ul {
    display:none; /* Sub menus are hidden by default */
    position:absolute;
    top:1.9em;
    left:0;
    float:left;
    right:auto; /*resets the right:50% on the parent ul */
    width:10em; /* width of the drop-down menus */
}
#header ul ul li {
    left:auto;  /*resets the left:50% on the parent li */
    margin:0; /* Reset the 1px margin from the top menu */
    clear:left;
    float:left;
    width:100%;
}
#header ul ul li a,
#header ul li.active li a,
#header ul li:hover ul li a,
#header ul li.hover ul li a { /* This line is required for IE 6 and below */
    font-size:.8em;
    font-weight:normal; /* resets the bold set for the top level menu items */
    background:#ff7f26;
    color:black;
    line-height:1.4em; /* overwrite line-height value from top menu */
    float:left;
    width:100%;
}
#header ul ul li a:hover,
#header ul li.active ul li a:hover,
#header ul li:hover ul li a:hover,
#header ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    background:#36f; /* Sub menu items background colour */
    color:#fff;
    float:left;
}
/* Flip the last submenu so it stays within the page */
#header ul ul.last {
    left:auto; /* reset left:0; value */
    right:0; /* Set right value instead */
}
#header ul ul.last li {
    float:right;
    position:relative;
    right:.8em;
}
/* Make the sub menus appear on hover */
#header ul li:hover ul,
#header ul li.hover ul { /* This line is required for IE 6 and below */
    display:block; /* Show the sub menus */
}

header.htm

<nav>
    <ul>
        <li><a href="http://support/">Home</a></li>
        <li><a href="#">Support</a>
            <nav>
            <ul>
                <li><a href="//support/supportsite/errorlog/">Error Log</a></li>
                <li><a href="//support/supportsite/blslog/">Transmission Log</a></li>
                <li><a href="//support/info">Info</a></li>
            </ul></nav></li>
        <li><a href="#">Query</a>
            <ul>
                <li><a href="//support/query/audit">Audit</a></li>
                <li><a href="//support/query/statistics">Statistics</a></li>
                <li><a href="//support/query/monitor/">Monitor</a></li>
            </ul></li>
        <li><a href="#">Admin</a>
            <ul>
                <li><a href="//support/admin/tools">Tools</a></li>
                <li><a href="//support/admin/resources">Resources</a></li>
            </ul></li>
        <li><a href="#">Troubleshooting</a>
            <ul>
                <li><a href="//support/troubleshooting/troubleshootinglinks">Troubleshooting Links</a></li>
                <li><a target=_blank href="https://trouble1/monitor/">Monitor 1</a></li>
                <li><a target=_blank href="https://trouble2/monitor/">Monitor 2</a></li>
            </ul></li>
    </ul>
</nav>

default.htm

    <!DOCTYPE html>
<html>
<head><title></title>
    <link rel=stylesheet type="text/css" href="header.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function(){
        $("#header").load("header.htm");
    });
    </script>
</head>
<body>
    <div id="header"></div>
</body>
</html>

Answer 1

更改以下代码：

<link rel=stylesheet type="text/css" href="//support/css/header.css">

to：

<link rel=stylesheet type="text/css" href="header.css">

最初，您指的是非现有CSS文件，即（//support/css/header.css），正确的参考为： <link rel=stylesheet type="text/css" href="header.css">，这意味着您现在是指存在的本地CSS文件。

我希望这会有所帮助。祝你好运！

Answer 2

谢谢！将CSS调用移至default.htm已解决了问题。