javascript - 我如何解决这个最大高度 Javascript 问题或使用 CSS 获得相同的结果？

Question

我正在使用 Interspire 购物车，common.js 中有一些代码可以控制“特色产品”等产品显示框的高度。它使所有元素都处于相同的高度。这让一切看起来都不错，但这在 Firefox 中似乎不起作用。产品显示在 Chrome 和 IE 中看起来很棒，但在 Firefox 上，框的高度会扩展到 4000+ 像素!更奇怪的是，有时如果我点击刷新按钮，它会修复并正确显示。我可以再次点击刷新，它又回到了困惑状态。站点测试人员遇到了同样的问题。

我删除了一些代码并在 CSS 文件中设置了框的高度，但是元素的高度都不同并且显示看起来不太好。所以我把代码放回去，我很难过。

我想我必须摆脱这段代码，并尝试仅通过 CSS 获得相同的结果。这可能吗？我不确定如何做到这一点，以便所有元素相对于彼此处于相同的高度。

Interpsire 编码员的评论是这段代码是“黑客工作”...

// Ensure that all product lists are the same height
function setProductListHeights(imgName, className) {
    // hack job putting this here but it needs to be reused by search ajax pager
    if (typeof(DesignMode) != 'undefined') {
        return;
    }

    if (typeof imgName != 'undefined') {
        if (typeof loadedImages[imgName] != 'undefined') {
            return;
        }

        loadedImages[imgName] = true;
    }

    setProductThumbHeight();
    /**
     * Sets the height of the elements passed in to match that of the one that
     * has the greatest height.
     *
     * @param ele The element(s) to adjust the height for.
     * @return void
     */
    function setHeight(ele) {
        var ele       = $(ele),
            maxHeight = 0;

        ele
            // reset the height just in case it was set by the stylesheet so
            // we can detect it
            .css('height', 'auto')
            // get the one with the greatest height
            .each(function() {
                if ($(this).height() > maxHeight) {
                    maxHeight = $(this).height();
                }
            })
            // and set them all to the greatest height
            .css('height', maxHeight);
    }

    if (!className) {
        className = '.Content';
    }

    setHeight(className + ' .ProductList:not(.List) li .ProductDetails');

    if (typeof imgName != 'undefined') {
        setHeight(className + ' .ProductList:not(.List) li .ProductPriceRating:has(img[src$='+imgName+'])');
    }

    setHeight(className + ' .ProductList:not(.List) li');
 }

非常感谢!一段时间以来，我一直在尝试解决这个问题，尤其是对于我创建的一些自定义销售面板。

Answer 1

我能看到的唯一潜在问题是:

.css('高度', maxHeight);

未指定测量单位，请尝试将测量单位附加到 maxHeight:

.css('高度', maxHeight + 'px');