绝对位置 - 铬和火狐

问题描述：

我目前正在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（相同版本的浏览器）上的黄色框不对齐。这是为什么？

。在你的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>

*现代

绝对位置 - 铬和火狐

相关推荐