絕對位置 - 鉻和火狐

我目前正在prestashop商店http://vps110594.ovh.net/。絕對位置 - 鉻和火狐

我有一個問題，黃色矩形價格在產品框上方頁腳。黃色價格框的下邊框應與產品名稱和「加入購物車」按鈕的黑框上邊框對齊。在Chrome中它是一致的，但在Firefox中不是。我之前遇到過這個問題（當使用position：relative和absolute時，Firefox和Chrome之間的差異像素很少），我決定通過JS應用內聯樣式的Firefox（也許您有其他解決方案？）：

window.onload = browserName(); 

function browserName() { 
    var browserName= navigator.userAgent; 
    var isFirefox = browserName.search("Firefox"); 
    if (isFirefox > 0) { 
     var elems = document.getElementsByClassName("cena_product"); 
     var size = elems.length; 

     for (var i = 0; i < size; i++) { 
      var box = elems[i]; 
      box.style.bottom = "10px"; 
     } 
    } 
}

無論如何，在我的計算機上，它在Chrome和Firefox中看起來都不錯，但是當我在不同的計算機上檢查此問題時，Chrome和Firefox（相同版本的瀏覽器）上的黃色框不對齊。這是爲什麼？

來源

2014-11-05 Jarosław Rewers

。在你的HTML代碼一團糟。這是很難調試，但我會試一試。而且，順便說一下，它也沒有與Chrome一致。 – 2014-11-05 13:07:50

我知道，這是一團糟，但這就是我必須與之合作......在此先感謝，@MiheyEgoroff！ – 2014-11-05 13:10:52

Chrome和Firefox的差異是由於編碼無效造成的。每個瀏覽器都會採取不同的方法。找到並修復你的CSS，或者重做它將**保證**你的成功。 – 2014-11-05 13:14:23

我做了一個簡單的例子，你需要什麼：LINK。

它在所有*瀏覽器上都完全一樣。

我建議你重寫你的代碼，因爲它可能會導致你未來的其他錯誤。

代碼示例：

<li> 
    <div class="item"> 
     <div class="image"> 
      <img src="http://vps110594.ovh.net/26-home_default/test.jpg" alt=""/> 
     </div> 
     <div class="buy"> 
      Buy now 
      <div class="price">435$</div> 
     </div> 
    </div> 
</li>

*現代

來源

2014-11-05 13:28:43

絕對位置 - 鉻和火狐

回答

相關問題