鏈接在IE11中不起作用-javascript相關問題
[英]links not working in IE11 - javascript related issue
問題描述
我正在一個網站上正常工作，除了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的新手，因此非常感謝您的幫助！
1 個解決方案
解決方案1
0 已采納 2016-12-08 01:00:08
HTML存在許多問題，其中包括一個自封閉的div，它可能會使您感到困惑。 我認為，可以通過刪除z-index: -5 html和body元素中的z-index: -5來解決當前的問題。
IE11的Javascript問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.