css - CSSはChromeとFirefoxで異なってレンダリングされます

Question

クロムで（統計は灰色のボックス（左下隅）に正しく表示されていることに注意してください）

ただし、Firefoxでは、統計はボックスの真下に配置されます（下半分は非表示）

私のCSSコードは次のとおりです

.stats_section {
  position: relative;
  opacity: 0.7;
  height: 20px;
  margin-top: -31px;
  margin-left: 76px;
  margin-bottom: 10px;
  width: 24%;
}

両方のブラウザで機能するようにCSSを修正するにはどうすればよいですか？

Answer 1

相対的なポジショニングは時々かなりトリッキーになることがあるので、この場合、明示的に設定されたポジショニングを使用して、コンテナ内の絶対的なポジショニングを使用します。

そのためには、を含む親コンテナの明示的な配置を設定する必要があります.stats_section（relativeこの場合はおそらく問題ありませんが、すでに設定されてabsoluteいる場合は機能します）。

.parent_container {
    position:relative;
}

.stats_section {
   position: absolute;
   opacity: 0.7;
   height: 20px;
   bottom: -22px;
   left: 4px  
   width: 24%; /* You might want to use fixed width in pixels here */
}