CSS在chrome和firefox中呈现不同

【问题标题】：CSS rendered differently in chrome vs firefoxCSS在chrome和firefox中呈现不同
【发布时间】：2012-12-19 10:29:42
【问题描述】：

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

但是在 fire-fox 中，统计信息位于框下方（下半部分隐藏）

我的CSS代码如下

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

如何修复 CSS 以使其适用于两种浏览器？

【问题讨论】：

您是否在使用任何类型的重置框架？此外，是否还有其他样式应用于元素（除了提到的样式）？

标签： css google-chrome firefox

【解决方案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 */
}

【讨论】：