我有一個HTML5音頻播放器。我把它的寬度設(shè)置為100%。我想在滾動時將播放器固定在頂部，所以我固定了它的位置。問題是當(dāng)我這樣做的時候，播放器的寬度溢出了容器。

下面是我的代碼。

超文本標(biāo)記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

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

我創(chuàng)建了一個小提琴來演示這個問題。它現(xiàn)在處于我想要的狀態(tài)。取消評論職位:固定；來看問題。

有誰能告訴我，我該怎么做才能讓它保持正確的寬度？

謝謝

你可以試試

width:inherit;

http://jsfiddle.net/vfQ5K/2/

需要包裝音頻元素并將css應(yīng)用于包裝器。我更新了你的jsfiddle。

<div id="container">
  <div class="audioWrap">
    <audio arc="#" controls></audio>
  </div>
</div>

然后CSS:

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

.audioWrap {
  width: 100%;
  position: fixed;
}

注意，如果你要固定它在容器中的位置，你可能需要在容器中添加“position: relative”。我繼續(xù)將它添加到j(luò)sfiddle中。

替換寬度:100%；帶寬度:繼承；

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

audio {
    width: inherit;
    position: fixed;
   
}

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

這對我很有效:

width: -webkit-fill-available;