Question

我使用此脚本获取水平div的总宽度：

$(document).ready(function(){
   $('.portfolio li').each(function(index) {
       totalWidthPortfolio += parseInt($(this).width(), 10) + 12;
   });

   $('.portfolio').css({
       'width' : totalWidthPortfolio ,
       'visibility' : 'visible'
   });
});

问题出现在桌面上，脚本返回23406，在手机上（Safari和Chrome），返回22522.

我也试过了outerWidth(true)但结果是一样的。

这是CSS：

.portfolio{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
}

li{
    float: left;
    padding-right: 12px;
    display: block;
    box-sizing: border-box;
}

li img{
    display: block;
    max-width: 100%;
    height: auto;
}

更新

仅在纵向模式下出现问题

Answer 1

返回的值取决于浏览器如何解析你的li元素。尝试在css上添加display：block属性

$（element）.width（）在Safari移动设备上报告不同的值

1 个答案: