【发布时间】：2015-09-06 01:58:41
【问题描述】：
所以我正在使用 jQuery 为我的网站开发一个滑出式菜单，整个过程在 Chrome 中运行良好，但在 Internet Explorer 中无法运行。我正在运行 IE11。我浏览了许多关于此的帖子，但没有找到解决方案。非常感谢您的帮助。
@charset "utf-8";
.navdiv{
bottom:0px;
top:0px;
border-right: 50px solid #3184a1;
wdith:1000px;
position:fixed;
left:-1040px;
background-color:#67b5d1;
z-index:1;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
}
.navdiv:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #3184a1;
z-index:100;
}
ul
{
width:1000px;
z-index:2;
postition:fixed;
}
li
{
list-style-type: none;
}
.menubutton
{
position: fixed;
z-index: 2;
cursor: pointer;
margin-left: 16px;
margin-top: 8px;
-webkit-filter: drop-shadow(0px 0px 0px #222);
filter: drop-shadow(0px 0px 0px #222);
}
.menuTable
{
margin-top: 12px;
margin-left: 116px;
position:fixed;
z-index:2;
}
.menubox
{
width:360px;
height:200px;
position:relative;
z-index:2;
}
.Xbutton
{
position: relative;
z-index: 2;
cursor: pointer;
margin-top: 9px;
margin-left: 1003px;
}
.navdiv, .spinningimage, .menubutton
{
-webkit-transition: all 1200ms ease;
-moz-transition: all 1200ms ease;
-ms-transition: all 1200ms ease;
-o-transition: all 1200ms ease;
transition: all 1200ms ease;
}
.menubutton, .Xbutton
{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.spinningimage
{
width: 20px;
height: 20px;
position: fixed;
z-index: 4;
margin-top: 168px;
margin-left: -32px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
<title>Untitled Document</title>
<link href="menuTest.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
$(document).ready(function() {
$("#menubutton").click(function(){
$("div").css({
"left": "0px",
});
});
$("#Xbutton").click(function(){
$("div ").css({
"left": "-1040px",
});
});
});
</script>
<script>
$(document).ready(function() {
$(".workbox").hover(function(){
$(".spinningimage").css({
"-ms-transform": "rotate(720deg)", /* IE 9 */
"-webkit-transform": "rotate(720deg)", /* Chrome, Safari, Opera */
"transform": "rotate(720deg)"
});
});
$(".workbox").mouseleave(function(){
$(".spinningimage").css({
"-ms-transform": "rotate(0deg)", /* IE 9 */
"-webkit-transform": "rotate(0deg)", /* Chrome, Safari, Opera */
"transform": "rotate(0deg)"
});
});
});
</script>
<script>
$(document).ready(function(){
$(".menubutton").hover(function() {
$(this).css({
"-webkit-filter": "drop-shadow(5px 5px 5px #222)",
"filter": "drop-shadow(5px 5px 5px #222)"
});
});
$(".menubutton").mouseleave(function() {
$(this).css({
"-webkit-filter": "drop-shadow(0px 0px 0px #222)",
"filter": "drop-shadow(0px 0px 0px #222)"
});
});
$(".Xbutton").hover(function() {
$(this).css({
"-webkit-filter": "drop-shadow(5px 5px 5px #222)",
"filter": "drop-shadow(5px 5px 5px #222)"
});
});
$(".Xbutton").mouseleave(function() {
$(this).css({
"-webkit-filter": "drop-shadow(0px 0px 0px #222)",
"filter": "drop-shadow(0px 0px 0px #222)"
});
});
$(".workbox").hover(function() {
$(this).attr("src","DashedWorkBox.png");
}, function() {
$(this).attr("src","WorkBox.png");
});
});
</script>
<div class="navdiv" id="navdiv">
<img src="x button.png" class="Xbutton" id="Xbutton" width="30" height="30" alt=""/>
<img src="MenuButton.png" class="menubutton" id="menubutton" width="30" height="30" alt=""/>
<table width="200" border="0" class="menuTable">
<tbody>
<tr>
<td><img src="WorkBox.png" class="menubox workbox" width="474" height="278" alt=""/><img src="spinning_icon.png" class="spinningimage" alt=""/></td>
<td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td>
</tr>
<tr>
<td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td>
<td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td>
</tr>
<tr>
<td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td>
<td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td>
</tr>
</tbody>
</table>
<li>
<ul></ul>
<ul></ul>
</li>
</div>
</body>
</html>【问题讨论】：
-
IE javascript 控制台中的任何线索？ （按 F12 我猜）
-
你确定它不工作 - 你只是没有看到 css 结果，因为它们是 -webkit- ???
-
我试过你的代码，但它根本不起作用，你拼错了宽度，你在设计这个。只需在单击时添加一个类到要显示的 div，然后使用 css 过渡动画。 （不适用于 Firefox）。
标签： javascript jquery html css plugins