jquery - width ， innerwidth ， outwerwidth ，都返回比实际值更高的值

Question

在页面上： http ://local.finerock.com/engagement-rings/halo-engagement-rings.html

我正在使用 flexbox 来显示产品过滤器，并使用一个小 jquery 将子元素宽度设置为等于其兄弟元素，代码如下：

$(window).load(function(){
            if($(window).width() >= 900){
                $('.filter-options-content').width($('.filter-options-title').innerWidth());
            }
        });

仍然比实际宽度更长，请参见屏幕截图。 在此处输入图像描述

我已经使用了所有选项，宽度、outerWidth 和 innerWidth，但结果仍然相同。

Answer 1

在我看来，这不是创建下拉项目的最佳方式。

但是，这里有一些修复技巧供您参考。

一开始，不要用 js 给子元素宽度或高度值。

CSS

自定义.css:185

.block.filter .block-content.filter-content .filter-options-item {
    margin: 0 15px !important;
    flex: 1;
    max-width: 15% !important;
    position: relative; /* add line */
}

自定义.css:210

.block.filter .block-content.filter-content .filter-options-item .filter-options-content, .catalog-product-view .product-options-wrapper .swatch-attribute .swatch-attribute-options {
    position: absolute;
    border: 1px solid #e8d4c1;
    padding: 10px;
    background: #ffffff;
    width: 100%; /* add line */
}

主题.css:6544

.page-layout-1column .block.filter .block-content.filter-content .block-filter-content {
    padding: 20px;
    max-height: calc(100% - 50px);
    overflow-y: auto; /* remove line */
}

结果：

我希望这能解决你的问题。