固定位置弄乱了宽度

Question

我在 div 中有一个 HTML5 音频播放器。我已将其宽度设置为 100%。我想在滚动时将播放器固定在顶部，所以我固定了它的位置。问题是当我这样做时，播放器宽度会溢出容器。

下面是我的代码。

超文本标记语言

<div id="container">
    <audio src="#" controls></audio>
</div>

CSS

#container {
    width : 350px;
    height: 300px;
    background: #BADA55;
}

audio {
    width: 100%;
    /*position: fixed;*/
}

我创建了一个小提琴来演示这个问题。它目前处于我想要的状态。取消注释即可position: fixed;查看问题。

谁能告诉我应该做什么才能使其保持正确的宽度？

谢谢

Answer 1

你可以尝试使用

width:inherit;