【发布时间】：2016-12-08 09:08:23
【问题描述】：
我正在开发一个在除 IE11 之外的所有网络浏览器中都能正常运行的网站。问题是我拥有指向另一个页面的链接的任何图像都被禁用（即徽标图像、菜单链接）。
我已将罪魁祸首缩小到使用 jquery 的响应式菜单 javascript (jPushMenu)。我有一个小提琴，我把所有东西都剥离了：
https://jsfiddle.net/cy83v725/
这是我的 html 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,IE=11,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/davincid.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/davincid-ie7.css">
<![endif]-->
<link rel="stylesheet" href="css/jPushMenu.css" type="text/css" media="all" />
<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css" type="text/css" media="all" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>DaVinci Digital | Innovative, Complete IT Solutions</title>
</head>
<body id="home">
<div class="wrapper">
<!-- Responsive design starts here -->
<!-- Left menu element-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
<h3><a><i class="fa fa-times"></i> Close Menu</a></h3>
<a href="index.html">Home</a>
<a href="who-we-are.html">Who We are</a>
<a href="what-we-do.html">What We Do</a>
<a href="your-team.html">Your Team</a>
<a href="our-clients.html">Our Clients</a>
<a href="helpdesk.html">DaVinci Helpdesk</a>
<a href="contact.html">Contact</a>
</nav>
<div id="button">
<button class="btn toggle-menu menu-left push-body"><i class="fa fa-bars"></i> MENU</button>
</div>
<div id="DDLogoRsp">
<a href="index.html"><img src="images/Davincid-logo.gif" class="logo" alt="DaVinci Digital" /></a>
</div>
<div class="pageTitleResponsive">
</div>
<div id="ContentArea">
<div class="indexRsp">
<div class="resp-slideshow"/>
</div>
<div class="tagline">
<img class="resp" src="images/tag.gif" align="right" alt="Providing 100% referral based professional services since 1993"/>
</div>
</div>
</div>
<!-- Responsive design ends here -->
<div id="main">
<div id="DDLogo">
<div id="headWrapper">
<div class="logo">
<a href="index.html"><img src="images/Davincid-logo.gif" align="left" alt="DaVinci Digital" /></a>
</div>
</div>
<ul id="NavContainerAlt">
<li id="whoWeAre"><a href="who-we-are.html"></a></li>
<li id="whatWeDo"><a href="what-we-do.html"></a></li>
<li id="contact"><a href="contact.html"></a></li>
<br class="clear">
</ul>
<div id="indexContentArea">
<div class="slideshow" align="center">
</div>
</div>
</div>
<div class="tagline">
<img class="resp" src="images/tag.gif" align="right" alt="Providing 100% referral based professional services since 1994"/>
</div>
<div class="DDrawing">
<img src="images/davinci-drawing.jpg" alt="Davinci"/>
</div>
</div>
<div id="Footer">
<p class="Footer">©2016 DaVinci Digital All Rights Reserved.</p>
<p class="Footer"> </p>
</div>
<!--load jQuery, required-->
<script src="js/jquery-1.9.1.min.js"></script>
<!--load jPushMenu, required-->
<script src="js/jPushMenu.js"></script>
<!--call jPushMenu, required-->
<script>
jQuery(document).ready(function($) {
$('.toggle-menu').jPushMenu();
});
</script>
</body>
</html>
这是 jPushMenu javascript：
/*!
* jPushMenu.js
* 1.1.1
* @author: takien
* http://takien.com
* Original version (pure JS) is created by Mary Lou http://tympanus.net/
*/
(function($) {
"use strict";
$.fn.jPushMenu = function(customOptions) {
var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions);
$('body').addClass(o.pushBodyClass);
// Add class to toggler
$(this).addClass('jPushMenuBtn');
$(this).click(function(e) {
e.stopPropagation();
var target = '',
push_direction = '';
// Determine menu and push direction
if ($(this).is('.' + o.showLeftClass)) {
target = '.cbp-spmenu-left';
push_direction = 'toright';
}
else if ($(this).is('.' + o.showRightClass)) {
target = '.cbp-spmenu-right';
push_direction = 'toleft';
}
else if ($(this).is('.' + o.showTopClass)) {
target = '.cbp-spmenu-top';
}
else if ($(this).is('.' + o.showBottomClass)) {
target = '.cbp-spmenu-bottom';
}
if (target === '') {
return;
}
$(this).toggleClass(o.activeClass);
$(target).toggleClass(o.menuOpenClass);
if ($(this).is('.' + o.pushBodyClass) && push_direction !== '') {
$('body').toggleClass(o.pushBodyClass + '-' + push_direction);
}
// Disable all other buttons
$('.jPushMenuBtn').not($(this)).toggleClass('disabled');
return;
});
var jPushMenu = {
close: function (o) {
$('.jPushMenuBtn,body,.cbp-spmenu')
.removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright');
}
};
// Close menu on clicking outside menu
if (o.closeOnClickOutside) {
$(document).click(function() {
jPushMenu.close(o);
});
}
// Close menu on clicking menu link
if (o.closeOnClickLink) {
$('.cbp-spmenu a').on('click',function() {
jPushMenu.close(o);
});
}
};
/*
* In case you want to customize class name,
* do not directly edit here, use function parameter when call jPushMenu.
*/
$.fn.jPushMenu.defaultOptions = {
pushBodyClass : 'push-body',
showLeftClass : 'menu-left',
showRightClass : 'menu-right',
showTopClass : 'menu-top',
showBottomClass : 'menu-bottom',
activeClass : 'menu-active',
menuOpenClass : 'menu-open',
closeOnClickOutside: true,
closeOnClickLink : true
};
})(jQuery);
这让我感到困惑：
- 当我打开开发者工具控制台时，链接有效。
- 当我调整页面大小以使其更小时，链接可以正常工作。
- 当我在 IE11 中访问 jPushMenu 的演示页面时，链接有效 (http://takien.github.io/jPushMenu/)
- 当我使用 IE11 在移动设备上查看该网站时，链接有效（即链接到主页的徽标图像）。
我是 javascript 新手，非常感谢任何帮助！
【问题讨论】：
-
开发者工具控制台中的任何错误？
-
我看不到，但我不能 100% 确定我是否正确使用了控制台。
-
我尝试从 IE11 打开 jPushMenu.js，得到错误“jquery”未定义。我试图从 IE11 打开 jquery，并得到“窗口未定义”。当我转到控制台选项卡（页面）时，它显示 0 个错误和 0 个警告。
-
请在此处发布您的代码，而不是作为外部链接。
-
代码已发布，还有一个 jsfiddle。请让我知道它是否应该采用不同的格式或者我做错了什么。谢谢！
标签： javascript jquery internet-explorer-11