div宽度奇怪地继承了位置固定

Question

我正在尝试创建一个带有播放按钮、进度条和停止按钮的音频播放器。我希望它固定在页面底部。

为此，我有以下 CSS：

.player-container {
    height: 100px; 
    background-color: #505050; 
    position: fixed;
    bottom: 0;
    width: inherit;
}

现在，奇怪的是宽度发生了什么变化。播放器容器包含在 Bootstrap 容器中。它通常从正确的位置开始，但根据浏览器的宽度，它似乎全部很小 - 或者它似乎是正常长度，加上填充的大小，这真的很奇怪。

这里是 HTML：

<div class="container">
  <div class="test"></div>
  <div class="player-container" ng-show="showPlayer" ng-controller="PlayerController">
    <span class="glyphicon glyphicon-play music-control"></span>
      <div class="seekBase" seek-track></div>
    <span class="glyphicon glyphicon-stop music-control" stop-music ng-click="stopClicked()"></span>
  </div>
</div>

我创建了一个 plnkr 来显示正在发生的事情，使用不同的颜色背景让一切变得非常清晰： http://plnkr.co/edit/MU4aK6Wf4UUmQh4egqU7

“位置：固定”是否导致这一切变得疯狂？明信片上的想法......

Answer 1

inherit 关键字将指定值和计算值设置为父元素上相同属性的计算值。

问题是引导程序可能会根据浏览器的宽度将一些width 设置为父.container（通过使用min-width @media 查询）。

当浏览器很窄时，父.container 没有width 的级联值。因此，由于width 不是继承属性，因此指定值为auto。对于width，auto 计算为auto。然后，inherit 使.player-container 也有一个auto width。所以width: inherit 在这种情况下不会影响.player-container。

如果您希望在浏览器不窄时出现这种行为，请删除 width: inherit 并使其成为 auto。

但是，当浏览器更宽时，.container 的宽度可能类似于750px、970px 或1170px。在这种情况下，.player-container 将继承相同的宽度。

如果您希望在浏览器狭窄时出现这种行为，请使用width: 100%。