0

我正在使用 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');
 }

非常感谢！我一直在尝试解决这个问题，特别是对于我创建的一些自定义销售面板。

4

4 回答 4

0

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

.css('高度', maxHeight);

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

.css('height', maxHeight + 'px');

于 2012-04-08T16:43:56.617 回答
0

我设置了一个固定高度，但还引入了设置高度功能的变体，以防止添加到购物篮的链接被推离屏幕。

可能有一种更简洁的方法可以做到这一点，但我的时间很短。

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);
        // edited as was causing 700+ height in firefox
        .css('height', 250);
}

function setHeightProdDetails(ele) {
    //variant function added for speed to correct firefox height issue
    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')
        .css('height', 60);
}

setHeightProdDetails('.Content .ProductList:not(.List) li .ProductDetails');

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

setHeight('.Content .ProductList:not(.List) li');
于 2014-03-11T17:42:00.207 回答
0

我最终将 .css('height', 'auto') 行的 'auto' 更改为 250。这看起来不错。

于 2012-04-10T01:21:13.107 回答
-1

这里同样的问题。我假设 Interspire 已经修复了这个问题，而我的客户使用的是旧版本。我尝试了建议的对高度大小进行硬编码的解决方案，但后来我丢失了产品下的“添加到购物车”链接 - 我认为因为这个函数被调用了许多对象集，并且早期的集合需要比后面的小那些。

我很确定问题是时间问题，因为当我通过使用 FF Developer 工具跟踪它时（当 maxHeight 超过 300 时，有条件断点停止）我无法重现故障。我似乎持有的解决方案是在进行比较之前检查我是否有一个有效的数字，并且为了更好地衡量，对大小设置一个上限：

if (typeof ($(this).height()) == "number" && $(this).height() > maxHeight) {
  if ($(this).height() < 300 ) {
    maxHeight = $(this).height();
  }
}
于 2013-11-21T14:41:50.290 回答