如何更改 Chrome 中 <audio> 元素的高度？ （能够在FF中做得很好）

Posted 2023-03-06

【中文标题】如何更改 Chrome 中 <audio> 元素的高度？ （能够在FF中做得很好）

【英文标题】：How to change the height of <audio> elements in Chrome? (Was able to do it fine in FF)

【发布时间】：2018-07-06 11:08:36

【问题描述】：

所以我在我的一个网站上用 Firefox 开发了一个配置文件（该网站接受配置文件中的 html）。然后我在 Chrome 中打开它，虽然我注意到每个人都存在差异和优缺点，但我并没有真正为任何事情烦恼，除了我顶部的音频播放器在 Firefox 中的样式正确，但在 Chrome 中没有。

在我看来，“高度”CSS 出于某种原因并没有在 Chrome 中使用，而在 Firefox 中却很好。

知道如何解决这个问题吗？如果不是，至少帮助我让它在 Chrome 中正常显示，即使它必须是胖而不是我想要的纤细条。至少我希望它能够正常运行并且不会被页面遮挡，即使它并不完全符合我的设想。

我已经尝试了几个@media“hacks”来仅针对 Chrome / webkit，但它们都没有。

有问题的个人资料位于here（需要闪存）。来源可在来源选项卡中免费获得。 CSS 类名是.BGM。

谢谢。

编辑：差异图片：https://imgur.com/a/EQyqD

您可以看到问题 - 我希望它像在 Firefox 中一样正确显示，而不是像在 Chrome 中那样被压碎。我实际上希望能够为 Chrome 进一步设置样式 - 使其在 Chrome 中的样式与在 Firefox 中的样式相同 - 尽管我猜 Chrome 可能没有 Firefox 那样灵活。

PS：是的，一个网站在 2018 年仍然在 Flash over HTTP 上运行真是太疯狂了，是的，该网站上的配置文件设计都是幼稚和前卫的。这是我的一种罪恶感——而且它是一个不错的小编码游乐场。

【问题讨论】：

您期望的高度是多少？在两种浏览器上对我来说都是 18 岁。

将高度更改为 30 似乎对 Chrome 来说效果很好，请尝试一下。

在尝试自定义外观方面，您可以随时查看一些外部音频播放器：***.com/questions/4126708/…。显然这是不可能的。与原生

事实上，在 Firefox 上将高度更改为 30 似乎没有任何不利影响，据我所知。

我的问题是我希望音频播放器纤薄。但我想我必须与 Chrome 妥协。我将如何使用现代方法仅针对 Chrome？我挖掘的关于该主题的大多数线程都暗示了我提到的“@media hacks”并且相当陈旧，并且这些方法似乎不再起作用。如果可能的话，我确实想让玩家的东西保持简约，而不是诉诸大量的样式来完成它，但我会做我必须做的事情。

【参考方案1】：

将 .bgm 类中的 height 属性更改为更大的值，例如 30。

如果你真的很喜欢播放器在 Firefox 上的外观，你也可以在 .bgm 中引入一些 Chrome 专用边距：

-webkit-margin-before: 12px;

如果您想让 Chrome 播放器更纤薄，您需要查看 webkit 掩码，这需要额外的图像文件。

【讨论】：

@Ozpin 如果您使用 Flash，我认为您不应该在代码污秽方面有高标准 xD 请记住，Flash 已被弃用，最初被 Chrome 和 Firefox 阻止。 Chrome 甚至正在考虑完全放弃对它的支持。 androidpolice.com/2017/07/25/…