jquery获取隐藏元素宽高错误

这几天在做tab切换这块，发现要获取切换的内容的宽高，得到隐藏元素的宽高总是错误的。于是便立即写了个demo测试下是哪里错误。

结构如下：

    <ul class="tab">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="tab-content">
        <p>
            <span>span1</span>
            <span>span1</span>
        </p>
        <p style="display:none">
            <span>span2</span>
            <span>span2</span>
        </p>
        <p style="display:none">
            <span>span3</span>
            <span>span3</span>
        </p>
    </div>

js：

 var p_height=$(this).outerHeight(true)
    var p_width=$(this).outerWidth(true)
    var _height = $(this).find('span').eq(0).outerHeight(true)
    var _height1 = $(this).find('span').eq(1).outerHeight(true)
    var _width = $(this).find('span').eq(0).outerWidth(true)
    var _width1 = $(this).find('span').eq(1).outerWidth(true)
    console.log(p_height,p_width);
    console.log(_height, _height1 , _width, _width1 );

测试下发现，

内部第一层p标签的宽高是对的，但是再往里面一层隐藏的span标签的宽高是错误的（已经转换成块元素）。网上搜索发现，这个是js的bug。

发现了一个解决办法jquery.actual.js官网

使用方法：

代码范例，使用如下写法即可。

$('.hidden').actual('width');

$('.hidden').actual('innerWidth');

$('.hidden').actual('outerWidth');

$('.hidden').actual('outerWidth',{includeMargin:true});

$('.hidden').actual('height');

$('.hidden').actual('innerHeight');

$('.hidden').actual('outerHeight');

$('.hidden').actual('outerHeight',{includeMargin:true});

由于主站服务器不稳定，经常打不开，所以将js保存下来点我