对于一个不是特别狭窄或对更大社区没有好处的问题，我预先道歉。现在解决这个问题是个人理智的问题。
我在一个网站上工作，我创建了一个社交抽屉。基本上，您将鼠标悬停在社交媒体选项卡上，它会稍微向左移动。当您单击它时，会打开一个抽屉，其中包含该 SocMedia 提要。
它在 FF、Chrome 和 Safari 上运行良好。在 IE9 中绝对没有任何反应！当我第一次创建抽屉时，它在 IE 中运行良好，但随着我继续开发该网站，显然我遇到了一些与之冲突的东西。但这不仅仅是一个 JS 冲突，因为即使是 CSS 悬停功能也不起作用，事实上，我正在使用最小的 jQuery 来实现这个效果。CSS 承担了大部分工作。
另外，我意识到 CSS3 过渡在 IE 中不起作用，我不关心 IE 中的平滑移动。
无论如何，这是该网站的链接。过了年龄门后，您会在菜单下方的右上角看到社交抽屉。首先在非 IE 浏览器中尝试，看看它应该如何运行。
的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 都没有效果。我敢肯定，这可能是我忽略的小事。
请比我聪明的人帮忙！我的理智受到威胁。提前致谢。如果我需要提供更多信息，请告诉我。