在chrome vs firefox中CSS的呈现方式不同

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