Question

我目前正在使用prestashop商店http://vps110594.ovh.net/。

我的黄色矩形有问题，页脚上方的产品包装盒上有价格。黄色价格框的底部边框应与黑色框的顶部边框对齐，并带有产品名称和＆＃34;添加到购物车＆＃34;按钮。在Chrome中，它是对齐的，但在Firefox中则没有。我之前遇到过这个问题（当使用position：relative和absolute时，Firefox和Chrome之间的差异很小），我决定通过JS为Firefox应用内联样式（也许你有其他解决方案？）： / p>

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（相同版本的浏览器）上都没有对齐。那是为什么？

Answer 1

我已经为您提供了一个简单的示例：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>

*现代

绝对位置 - chrome和firefox

1 个答案: