css - CSS在chrome和firefox中呈现不同

Question

在 chrome 中（注意统计数据正确显示在灰色框中（左下角））

然而在火狐中，统计数据位于框下方（下半部分隐藏）

我的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 */
}