Question

我正在为一个对大社区没有特别缩小或有益的问题提前道歉。解决这个问题现在是个人理智的问题。

我正在网站上工作，我创建了一个社交抽屉。基本上，您将鼠标悬停在社交媒体选项卡上，并略微向左移动。当您点击它时，抽屉里面会打开一个SocMedia Feed。

它适用于FF，Chrome和Safari。 IE9绝对没有任何意义！当我第一次创建抽屉时，它在IE中运行良好，但是当我继续开发网站时，显然我有一些与之相冲突的东西。但它不只是一个JS冲突，因为即使CSS悬停功能也无法正常工作，事实上，我使用最小的jQuery来实现这种效果。 CSS正在完成大部分工作。

另外，我意识到CSS3过渡在IE中不起作用，我并不关心IE中的流畅运动。

无论如何，这里是该网站的链接。一旦经过Age Gate，您将在菜单下方的右上角看到社交抽屉。首先在非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。

当我在开发者工具中执行此操作时，您的社交图标的行为与设计相符。我将其更改为z-index:0;

Answer 2

我认为这是由您网站custom-js.js中第49行调用.Sortable（）引起的。它会导致所有浏览器出错，但其他浏览器会报告错误，然后继续执行您的javascript，而IE卡在那里。如果你想使用.sortable，那么它属于jquery UI，它不包含在引用的脚本中。

IE不会响应CSS或jquery

2 个答案: