在Chrome中删除音频播放器的最大宽度 [英] Remove max-width on audio player in Chrome

问题描述

我希望默认的HTML5音频播放器适合其父容器的宽度.我将其显示设置为块"，宽度设置为"100％".但是，似乎Chrome在超过特定窗口大小后开始在左侧和右侧添加填充:

I'd like the default HTML5 audio player to fit the width of its parent container. I set its display to 'block' and width to '100%'. However, it seems like Chrome starts to add padding on the left and right sides after surpassing a certain window size:

Firefox的行为符合我的期望，播放器的边缘正好到达父div的边缘:

Firefox is behaving as I'd like it to, with the edges of the player reaching exactly to the edge of the parent div:

如何在Chrome中删除此多余的填充?

How can I remove this extra padding in Chrome??

:如评论中所指出，它实际上是一个最大宽度(不是填充)...

: As pointed out in the comments, it looks like it's actually a max-width (not padding)...

谢谢！

推荐答案

影子DOM中有一个max-width: 800px:

There is a max-width: 800px in the shadow DOM:

您可以使用::-webkit-media-controls-enclosure覆盖它:

audio::-webkit-media-controls-enclosure {
    max-width: 100%; /*or inherit*/
}

http://jsfiddle.net/3qLbdrka/4/

这篇关于在Chrome中删除音频播放器的最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！