css - CSS - 相対要素内の要素を修正: 配置のバグ?

Question

かなり奇妙な構成で問題が発生しました。

作業状況:

私は基本的なコンテナ/コンテンツをセットアップしました。コンテナはフルボディを満たし、コンテンツwidthは中央に固定され、位置はmargin: autoです。

このコンテンツ内に、リンクを含む要素をlinks-container含むlink要素があります。

このlinks-container要素はposition: fixed. そして、 にlinkはposition: relativeオフセットがあります:right: 'size'リンクがコンテナの外側に見えるようにします。

バグ ：

一部のページでは、右にスライドするコンテンツが必要です: left: 50px.
しかし、何らかの理由で、Firefox ではリンクがコンテンツの近くにとどまり、Chrome では同じ場所にとどまります。

ここでバグを確認できます。コードは次のとおりです。

これはバグですか、それとも何か不足していますか?

HTML :

<div class='container'>
  <div class='content'>
    <div class='links-container'>
      <div class='links'>
      </div>
    </div>
  </div>
</div>

CSS :

body {
  padding: 100px;
}

.container {
  width: 100%;
  height: 100%;
}

.content {
  width: 500px;
  height: 300px;
  background: red;
  position: relative;
  margin: auto;
  background: red;
  left: 50px;
}

.links-container {
  position: fixed;
}

.links {
  position: relative;
  background: yellow;
  width: 50px;
  height: 50px;
  right: 50px;
}