谷歌浏览器和火狐浏览器中CSS的呈现方式不同

Question

在谷歌浏览器中（请注意，状态在灰色框（左下角）中正确显示）

但是，在火狐浏览器中，状态的位置远低于框（底部一半隐藏）

我的CSS代码如下：

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

如何修复CSS，使其在两种浏览器中都能正常工作？

- Zhen

---

你是否使用了任何重置框架？另外，除了提到的样式之外，还有应用到元素上的其他样式吗？ - Brad Christie

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

- user188654