CSS - Firefox - DIV issue

Question

我有一个奇怪的火狐问题。 如果您转到 http://www.aerlawgroup.com - 向下滚动并查看右侧的框（带木槌）。 如您所见，文本和电话号码向右刷新得太远。 如果您在Chrome或Safari中看到网站，则呈现正常。 有人建议我重置 .hr css 标签，但这不起作用。 我使用Weebly，所以虽然我可以更改HTML和CSS，但Weebly会在发布时插入它自己的代码。 这是代码：

<div id="FREE2">FREE CASE</div>
<div class="PHONENUMBER" id="PHONE3">(800) 852 - 9851</div>
<div class="EVALUATION" id="EVAL2">EVALUATION</div>
<div class="CALLORCLICK" id="CALL2">CALL OR CLICK</div>
</div>

和

#FREE2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #b2c8ff;
    position: absolute;
    top: 23px;
    font-size: 22px;
    left: 693px;
}
#EVAL2 {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 42px;
    font-size: 20px;
    left: 693px;
}
#CALL2 {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 65px;
    left: 693px;
    font-size: 17px;
}
#PHONE3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    top: 170px;
    position: absolute;
    left: 824px;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
}

Answer 1

在该

框中相对于页面的元素上使用绝对定位不是一个好主意。我认为Chrome/Safari和Mozilla对这些文本应该相对的内容有不同的想法。将它们相对于盒子本身可以解决您的问题（从我在开发人员工具中一直在搞砸的内容来看，它正在修复它）。

要使元素相对于盒子left: xx和top: xx重新定位，只需将其容器的位置（.bigimg）设置为相对。

.bigimg {
    background-image: url("http://www.aerlawgroup.com/uploads/2/1/1/5/21159280/9150872_orig.jpg");
    width: 282px;
    height: 199px;
    position: relative;
}

现在，如果您更改#FREE2的值以使其可见

#FREE2 {
    font-family: Arial,Helvetica,sans-serif;
    color: rgb(178, 200, 255);
    top: 30px;
    font-size: 22px;
    left: 20px;
    position: absolute;
}

您需要调整框中所有元素的值，然后在浏览器之间保持一致。这些值只是一个示例，您需要自己找到旧值和新值之间的差异。

Answer 2

如果使用绝对位置，则必须设置相对于其父元素的位置。例如，".电话号码"将是".bgimg"。

.bgimg {position:relative;}
.PHONENUMBER {position:absolute; top:170px; right:20px;}

所以"。电话号码"将相对于".bgimg"定位为绝对值。