width , innerwidth , outwerwidth, 都比实际值高 returns

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());
            }
        });

它的宽度仍然比实际宽度长，请参见屏幕截图。 enter image description here

我已经使用了所有选项，width，outerWidth & innerWidth，结果还是一样。

Answer 1

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

不过，这里有一些修复技巧供您参考。

一开始不要用js给子元素宽高值

CSS

custom.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 */
}

custom.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 */
}

theme.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 */
}

结果：

希望这能解决您的问题。

width , innerwidth , outwerwidth, 都比实际值高 returns

width , innerwidth , outwerwidth, all returns higher value than actual

jquery

outerwidth