我应该怎么做才能使这个菜单栏在 Internet Explorer 7 及更高版本中正常工作？

Posted 2023-02-16

【中文标题】我应该怎么做才能使这个菜单栏在 Internet Explorer 7 及更高版本中正常工作？

【英文标题】：What should I do to make this menu bar work well in Internet Explorer 7 and above?

【发布时间】：2012-08-13 20:47:22

【问题描述】：

我有一个 CSS 模板，我正在尝试对其进行一些更改，以便在我的网站中使用它。我面临一个奇怪的问题，我不知道如何解决它。 网站顶部的菜单栏是这样设计的，当用户单击其中一个选项时，该选项将位于一个深绿色的矩形内，如下图所示：

这个矩形使用以下 CSS 实现：

/* TOP MENU */
#nav
    position:relative;
    z-index:200;
    padding:0;
    text-align:right

#topnav, #topnav ul
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;


#topnavpadding:25px 0 0 0; float:right

#topnav a
    padding:0 20px 34px 20px;
    color:#fff;
    text-decoration:none;


#topnav li a:hover
    text-decoration: none;
  
#topnav li.current > a

#topnav li
    float:left;
    position:relative;
    font-size:12px;
    padding:0 0 0 0px;
    margin:0;
    height:35px;
    line-height:35px;
    cursor:pointer;

#topnav li.lastpadding:0; margin:0
#topnav li li
    padding-right:0px;
    display:block;
    line-height:25px;
    padding:0px 0px 0px 0;
    margin-right:0;
    text-align:left !important;
    float:none;


#topnav ul 
    position:absolute;
    display:none;
    width:160px;
    top:58px;
    left:0;
    padding:15px 0 13px 0;
    text-align:left;
    background-position:0 13px !important


#topnav li ul a
    width:130px;
    display:block;
    margin:0 0px;
    padding:8px 15px;
    font-size:12px !important;
    line-height:16px;
    color:#fff;
    text-align:left !important;
    text-transform:capitalize;



#topnav li ul a:hover

#topnav ul ul
    top:0px;
   

#topnav li ul ul 
    left:160px;
    margin:0px 0 0 0px;


#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul
    display:none;

#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul
    display:block;

#topnav li.back 
#topnav li.back z-index:8;position: absolute;
#topnav > li a, #topnav > li a:hover, #topnav > li a:visitedz-index:10;position:relative

此外，该矩形随鼠标移动的移动取决于以下 javascript 文件：

<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>

    <script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>

我的问题是我公司的大多数机器都使用 Internet Explorer 7 并且菜单无法正常使用。当我单击其中一个选项时，没有任何变化，这意味着我没有被重定向到另一个页面。除此之外，矩形形状仅围绕第一个选项。 为什么？以及如何解决？

由于我是作为 ASP.NET 应用程序开发的，所以我将所有 CSS 和 Javascript 文件放在母版页中，对于菜单栏，我作为用户控件进行开发。

这里有一个指向JSFiddle 的链接，但由于缺少图片而未完成。 抱歉，我不熟悉 JSFiddle。

【问题讨论】：

你能添加一个指向 jsfiddle 的链接吗？

对不起，我不知道如何使用它以及如何添加 Javascript 文件。此应用程序是基于 Intranet Web 的应用程序，因此没有指向它的链接。

矩形在链接上移动真的很重要吗？您还可以使用特征检测，以便现代浏览器使用酷炫的 Lava Lamp 导航，而旧版浏览器则加载传统导航。

怎么样？很抱歉问了很多问题，但我是一名新开发人员，我正在寻求帮助和有用的资源，可能有助于解决这个问题

我会发布作为答案等待。

【参考方案1】：

替换

<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>

<script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>

与：

<script>
if ($.browser.version < 9.0 && $.browser.msie) 
document.getElementsByTagName("head")[0].innerhtml = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js"></script><script type="text/javascript"  src="./Scripts/jquery.lavalamp.js"></script><script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>';

else 
    document.getElementById("head")[0].innerHTML = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js">';


​​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​