IE11中CSS transform translateY失效，右侧悬浮面板定位异常求助

Hey there, I see you're having trouble getting that right-side floating panel to center vertically in IE11—Chrome works fine, but IE's being its usual stubborn self with transform: translateY(-50%). Let's get this sorted out.

The Root of the IE11 Issue #

IE11 has well-documented quirks with how it handles transform combined with viewport units like vh. Your current approach using margin-top: 50vh plus transform: translateY(-50%) works great in modern browsers, but IE11 miscalculates this combination, leading to the panel sticking to the lower half of the viewport instead of centering.

The IE-Friendly Fix #

Instead of relying on transform, let's use a classic vertical centering method that IE11 fully supports: top: 50% paired with a negative margin-top equal to half your panel's height. Here's how to adjust your CSS:

Modified CSS

#panel {
  position: fixed;
  right: 0;
  height: 180px;
  width: 27px;
  top: 50%;
  margin-top: -90px; /* Half of your panel's height (180px / 2) */
}

#panel-content {
  border-radius: 10px 0px 0px 10px;
  position: absolute; /* Changed from fixed to absolute to position relative to #panel */
  right: 0;
  background: black;
  height: 100%;
  width: 100%; /* Add this to ensure it fills the parent panel */
}

Why This Works #

• top: 50% positions the top edge of your panel at the vertical midpoint of the viewport.
• margin-top: -90px pulls the panel upward by half its own height, perfectly centering it vertically.
• Switching #panel-content to position: absolute ensures it stays contained within the parent #panel instead of positioning relative to the entire viewport, which will keep your hover animations consistent across browsers.

Full Updated Code #

Here's the complete code with all fixes applied:

<html>
<head>
  <title>Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <style>
    #panel {
      position: fixed;
      right: 0;
      height: 180px;
      width: 27px;
      top: 50%;
      margin-top: -90px;
    }

    #panel-content {
      border-radius: 10px 0px 0px 10px;
      position: absolute;
      right: 0;
      background: black;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="panel">
    <div id="panel-content">
    </div>
  </div>

  <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>
  <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(){
        // Note: I noticed you're referencing #panel-collapse but it doesn't exist in your HTML
        // If this is a typo, make sure to add that element or remove this line
        $("#panel-collapse").hide("slide", { direction: "right" }, 300,function(){
          $pCont.stop().animate({width: 0}, 200);
        });
      });
    });
  </script>
</body>
</html>

Quick Note #

I noticed your mouseleave function references #panel-collapse, but that element isn't present in your HTML. Make sure to either add that element to your markup or adjust the code to remove that line—otherwise, you might get a JavaScript error in IE11 (and other browsers) when the mouse leaves the panel.

Test this in IE11, and your panel should now center vertically perfectly, with the hover/leave animations working just like they do in Chrome.

内容的提问来源于stack exchange，提问作者Ali Chamas