CSS - Firefox - DIV問題

Question

我有一個奇怪的FIREFOX問題。如果您轉至http://www.aerlawgroup.com - 向下滾動並查看右側的方框（用木槌）。正如你所看到的，文本和電話號碼被沖刷得太遠了。如果您在Chrome或Safari中看到網站，則呈現效果不錯。我被建議重置.hr css標籤，但那不起作用。我使用Weebly，所以當我可以更改HTML和CSS時，We​​ebly會在發佈時插入它自己的代碼。下面是代碼：

<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

如果您使用絕對位置，則必須設置相對於其父元素的位置。例如，「.PHONENUMBER」的父元素將是「.bgimg」。

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

所以「.PHONENUMBER」將相對於「.bgimg」定位絕對位置。