jquery - IE 不会响应 CSS 或 jquery

Question

对于一个不是特别狭窄或对更大社区没有好处的问题，我预先表示歉意。现在解决这个问题是个人理智的问题。

我在网站上工作，我创建了一个社交抽屉。基本上，您将鼠标悬停在社交媒体选项卡上，它会稍微向左移动。单击它时，会打开一个抽屉，其中包含 SocMedia 提要。

它在 FF、Chrome 和 Safari 上运行良好。在 IE9 中绝对没有任何反应!当我第一次创建抽屉时，它在 IE 中运行良好，但随着我继续开发该站点，显然我遇到了一些与之冲突的东西。但这不仅仅是 JS 冲突，因为即使是 CSS 悬停功能也不起作用，事实上，我正在使用最小的 jQuery 来实现这种效果。 CSS 完成了大部分工作。

此外，我意识到 CSS3 转换在 IE 中不起作用，我不关心 IE 中的平滑移动。

无论如何，这里有一个指向该站点的链接。通过年龄门后，您会在菜单下方的右上角看到社交抽屉。首先在非 IE 浏览器中尝试它，看看它应该如何表现。

http://pearlvodkatest.com/

HTML:

<div id="social_drawer">
<div id="twitter_drawer" class="drawer_pull"></div>
<div id="tw_drawer" class="drawer"> </div>
<div id="facebook_drawer" class="drawer_pull"></div>
<div id="fb_drawer" class="drawer"></div>
<div id="google_drawer" class="drawer_pull"></div>
<div id="gl_drawer" class="drawer"></div>
</div>

这是我的 jQuery:

<script type="text/javascript">
$('#facebook_drawer').click(function() {
$(this).toggleClass('open');
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#fb_drawer').toggleClass('open');
});
$('#twitter_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#tw_drawer').toggleClass('open');
});
$('#google_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#gl_drawer').toggleClass('open');
});
</script>

这是 CSS:

#social_drawer {
width: 36px;
height: 450px;
background: url(images/tab_shadow.png) right top no-repeat;
position: absolute;
z-index: 1000;
right: -7px;
/*box-shadow: -10px 0 27px -13px #000000 inset;*/
padding-top: 25px;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
overflow: hidden;
}
#social_drawer.open {
width: 375px;
box-shadow: none;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
}
#social_drawer .drawer {
background: #fff;
width: 0px;
height: 400px;
position: absolute;
z-index: 1000;
left: 29px;
right: auto;
box-shadow: 0px 0 21px -5px #000000 inset;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
opacity: 0;
border: none;
}

#social_drawer #fb_drawer.drawer.open {
border: 3px solid #336699;
}
#social_drawer #tw_drawer.drawer.open {
border: 3px solid #6699cc;
}
#social_drawer #gl_drawer.drawer.open {
border: 3px solid #d94c2c;
}
#social_drawer .drawer.open {
left: auto;
right: 0;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
display: block;
opacity:1;
width: 295px;
padding: 21px;
}
#social_drawer .drawer_pull {
width: 30px;
height: 31px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
cursor: pointer;
padding: 3px 0;
position: absolute;
right: 0;
z-index: 5000;
}
#social_drawer.open .drawer_pull.open {
left: 0;
width: 36px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
}
#social_drawer.open .drawer_pull.hidden {
float: right;
width: 30px;
margin-right: -30px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
opacity: 0;
}

#social_drawer .drawer_pull:hover {
width: 36px;
}
#facebook_drawer {
background:url(images/social/facebook_drawer.png) left no-repeat;
top: 60px;
}
#twitter_drawer {
background:url(images/social/twitter_drawer.png) left no-repeat;

}
#google_drawer {
background:url(images/social/google_drawer.png) left no-repeat;
top: 95px;
}

最初我认为这是一个 z-index 问题，但我尝试了多种 z-index 组合，甚至将社交抽屉移入和移出不同的 div，但没有任何效果。我确定这可能是我忽略的一些小问题。

请比我聪明的人帮忙!我的理智受到威胁。提前致谢。如果我需要提供更多信息，请告诉我。

Answer 1

从 BODY 标签中删除 z-index:-100;。 IE 通常不喜欢负 z-index。

当我在 Developer Tool 中执行此操作时，您的社交图标会按设计运行。我把它改成了 z-index:0;