Remove max-width on audio player in 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 is behaving as I'd like it to, with the edges of the player reaching exactly to the edge of the parent div:

How can I remove this extra padding in Chrome??

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

Thanks!

回答1:

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

You can use ::-webkit-media-controls-enclosure to override it:

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

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

回答2:

There is chromium issue 138419 marked as "WontFix". The reason is that this is by design. Developers would have to design their own custom UI for special cases like yours (there could be a way to override this in CSS though).

来源：https://stackoverflow.com/questions/26221047/remove-max-width-on-audio-player-in-chrome