右侧菜单栏在Chrome中失效，Firefox可正常运行求助

嘿，我看了你的问题和代码，知道你为啥在Chrome里遇到麻烦了——最近Chrome的更新确实调整了fixed定位元素结合transform的渲染逻辑，和Firefox的处理方式不一样了，之前能正常运行现在出问题也很正常。

核心问题点 #

你的#right_menu是fixed定位加上rotate(-90deg)旋转，Chrome现在会把这类元素的包含块处理逻辑和Firefox区分开：

• Firefox会保留旋转后元素的原始定位上下文，子菜单的absolute定位能正常参考父元素
• Chrome则会把旋转后的fixed元素的定位上下文绑定到视口，导致子菜单的位置计算完全混乱

另外，子菜单继承了父元素的旋转变换，这也会让它在Chrome里的显示位置完全偏离预期。

修复后的代码 #

HTML调整（新增外层容器）

<div class="menu-container">
  <ul id="right_menu">
    <li><a href="#profile_comments">Message Me</a></li>
    <li><a href="#">Galleries</a>
      <ul class="sub_menu">
        <li><a href="#profile_password_photo_galleries">PW Gallery</a></li>
        <li><a href="#profile_photo_galleries">My Gallery</a></li>
      </ul>
    </li>
    <li><a href="#profile_interests_content">Interest</a></li>
    <li><a href="#profile_about_me_friends">About Me</a></li>
    <li><a href="#home_page">Home</a></li>
  </ul>
</div>

CSS修改（调整定位与旋转逻辑）

/* 外层fixed容器，负责固定位置 */
.menu-container {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 46px;
}

#right_menu {
  background: linear-gradient(#FF00FF, #77047e);
  display: table;
  font-size: 15px;
  line-height: 46px;
  margin: 0;
  padding: 0;
  position: absolute; /* 改为absolute，依赖外层fixed容器定位 */
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-90deg);
  transform-origin: right top; /* 简化z轴参数，现代浏览器无需显式写0 */
  width: 100vh;
  white-space: nowrap;
}

#right_menu li {
  display: table-cell;
  position: relative; /* 给子菜单提供正确的定位参考 */
}

#right_menu li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
}

.sub_menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%; /* 相对于父菜单右侧定位 */
  transform: rotate(90deg); /* 抵消父菜单的旋转，让子菜单正常显示 */
  transform-origin: right top;
  margin: 0;
  padding: 0;
}

.sub_menu li a {
  background: linear-gradient(#77047e, #FF00FF);
}

#right_menu li:hover .sub_menu {
  display: block;
}

#right_menu>li a:hover {
  background: #FF00FF;
}

修复逻辑说明 #

1. 用外层menu-container承担fixed定位的职责，把#right_menu改成absolute，避免旋转操作干扰fixed的定位上下文
2. 给子菜单添加rotate(90deg)反向旋转，抵消父菜单的旋转效果，确保子菜单显示方向正常
3. 调整子菜单的定位参数为right:100%，让它能正确出现在父菜单的对应位置
4. 移除了不必要的浏览器前缀，现代Chrome和Firefox都支持标准的linear-gradient写法

这样修改后，菜单在Chrome和Firefox里就能保持一致的运行效果了。

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