应用CSS zoom后如何修正HTML5音频播放器下拉菜单位置？

问题重现 #

• 在Chrome、Brave、Internet Explorer/Edge浏览器中，给HTML5 <audio> 元素设置 zoom: 80% 后，点击播放器右上角三点按钮弹出的原生下拉菜单会明显偏离按钮位置，且该菜单属于浏览器原生组件，无法通过开发者工具定位修改。
• 此zoom样式用于在播放器最大宽度250px的限制下，让音频时间轴显示更宽，保证整体比例协调，需要保留这一视觉效果。

原因分析 #

zoom属性会对元素及其内部所有内容（包括浏览器渲染的原生UI组件）进行布局级缩放，但浏览器计算原生下拉菜单的定位时，并未适配zoom的缩放比例，菜单定位坐标仍基于元素原始尺寸计算，最终导致偏移。

解决方案 #

用CSS transform: scale() 替代zoom实现视觉缩放，同时通过容器限制布局尺寸，既保留所需显示效果，又不影响原生菜单定位：

1. 给<audio>元素添加父容器：

<div class="audio-container">
  <audio controls src="your-audio-source.mp3"></audio>
</div>

2. 移除<audio>元素的zoom样式，添加以下CSS：

.audio-container {
  max-width: 200px; /* 250px × 80%，对应原zoom:80%后的显示宽度 */
  overflow: hidden;
}

.audio-container audio {
  -ms-transform: scale(0.8); /* 兼容IE/旧版Edge */
  -ms-transform-origin: top left;
  transform: scale(0.8);
  transform-origin: top left;
  width: 125%; /* 1 ÷ 0.8 = 1.25，让音频原始宽度填满容器缩放后的显示区域 */
}

方案说明 #

• transform: scale(0.8) 实现和zoom一致的视觉缩放，但不会改变元素的布局坐标，浏览器原生菜单会基于音频元素实际位置正确定位。
• transform-origin: top left 确保缩放从左上角开始，避免出现视觉偏移。
• 容器的max-width设置为原最大宽度乘以缩放比例，保证布局尺寸符合需求。
• 音频元素设置width:125%，是为了让缩放后的时间轴完整填满容器，达到原zoom样式的显示效果。

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