基本上，我正在尝试创建一个放置在右侧的侧面板，当将鼠标悬停在其顶部时，该侧面板在ie11和chrome中都有效，当它打开时，它会关闭。所以这是代码在 chrome 中运行良好，但在 ie11 中则不行。在 ie11 中，它通过视图的下半部分展开，我希望它覆盖中间的一部分并完美地定位在中间。任何帮助将不胜感激。我发现问题出在 css transform：translateY 尝试 -ms-transform-webkit-transform 没有任何效果。.这是代码：
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
<script>
$(function () {
//Function to show side panel on hover
var $pCont = $("#panel-content");
$pCont.width(0);
$('#panel').mouseenter(function(){
$pCont.stop().animate({width: 27}, 200);
});
//Animation for closing the sidepanel when mouseleave
$('#panel').mouseleave(function(){
$("#panel-collapse").hide("slide", { direction: "right" }, 300,function(){
$pCont.stop().animate({width: 0}, 200);
});
});
});
</script>
<style>
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
position: fixed;
right: 0;
background: black;
height:100%;
}
</style>
发生这种情况是因为您将position: fixed放在#panel-content中，因此在ie11中，页面将成为他的父级，height: 100%页面的高度而不是#panel的高度
你不需要使用javascript来做这个悬停，你可以用这个代码来做到这一点。
这是一把小提琴
.HTML
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
.CSS
body
{
overflow-x: hidden;
}
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
left: 100%;
position: absolute;
background: black;
height:100%;
width: 100%
transition: .2s;
}
#panel:hover #panel-content{
left: 0;
}