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">

到：

<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修复了问题。

IE导航栏有时会破坏（在IE8,9和10中测试）

2 个答案: