应用CSS缩放时如何更改HTML5音频播放器的下拉位置？

Question

此问题发生在 Chrome、Brave 甚至 Internet Explorer/Edge 中：

当点击三个点打开下拉菜单时，下拉菜单远离音频播放器：

使用 Webdeveloper，我无法定位下拉列表。好像是直接从浏览器来的。

那么如何将其位置更改为直接位于 HTML 音频嵌入的三个点处？

更新：

我发现问题在于

zoom

元素上使用的 CSS

audio

：

audio {
    zoom: 80%;
}

这会重新定位下拉菜单！

旁注： 需要缩放来以适当的比例呈现音频嵌入，以便音频时间线显示得更宽。由于我们网站上的 HTML 布局，我们可以使用的最大宽度是 250px。

无变焦：

变焦：

总结：

我们需要缩放，但它放错了下拉菜单。如何解决这个问题？因此音频播放器下拉列表位于正确/默认位置。

Answer 1

您可以设置

transform: scale(.8);

来代替非标准化的

zoom: 80%;

。
如果您需要补偿空白空间（因为应用

transform

后元素的尺寸被保留），您可以设置负值

margin

。
不知何故：

audio {
  --scale: .8;
  --width: 350px;
  --height: 54px;
  transform: scale(var(--scale));
  transform-origin: left top;
  width: var(--width);
  height: var(--height);
  margin: 0 calc(var(--width) * var(--scale) - var(--width)) calc(var(--height) * var(--scale) - var(--height)) 0;
  display: inline-block;
  vertical-align: middle;
}

<div>Lorem ipsum dolor.</div>
<audio src="/" controls></audio> <i>Audio info</i>
<div>Lorem ipsum dolor sit.</div>