固定位置弄亂了寬度

Question

我有一個div的HTML5音頻播放器。我已將其寬度設置爲100％。我想在滾動時將播放器固定在頂部，所以我修正了它的位置。問題是當我這樣做時，播放器寬度溢出容器。

以下是我的代碼。

HTML

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

CSS

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

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

我創建了一個fiddle來證明這個問題。它目前處於我想要的狀態。取消註釋position: fixed;以查看問題。

任何人都可以告訴我該怎麼做才能使它保持正確的寬度？

感謝

Answer 1

你可以嘗試用

width:inherit; 

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

Answer 2

需要包裝的音頻元素和CSS應用到包裝。我更新了你的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; 
} 

注意，如果你是固定它的容器內的位置，你可能想的立場：相對「放入容器。我繼續並將其添加到jsfiddle。