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