inline-block引起的一个问题

今天在写代码的时候碰到一个问题，是由inline-block引起的。在代码中使用jquery的animate实现一个动画，改变一个inline-block的宽，高。

$(".ds_submenu").click(function(){
    var rect=this.getBoundingClientRect();
    $(this).animate({width:rect.width,height:rect.height},500);
});

<div class="ds_wrapper">
    <ul>
        <li class="ds_li">
            <div class="ds_menu">首页</div>
            <div class="ds_subcont">
                <div class="ds_submenu">
                    css文章
                </div>
                <div class="ds_submenu">
                    js文章
                </div>
                <div class="ds_submenu">
                    svg教程
                </div>
                <div class="ds_submenu">
                    canvas资料
                </div>
            </div>
        </li>

    </ul>
</div>

.ds_submenu{
    margin:5px 0;
    display:inline-block;
    white-space:nowrap;
    width:100%;
    box-sizing:border-box;
    background:#f1c40f;
    color:#fff;
    font-size:13px;
    padding:0 8px;

    cursor:default;
    line-height:32px;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: none;
}

代码大致如上，ds_submenu元素是inline-block的，而js代码的动画animate的效果预期应该没有动作。而实际中点击效果确实有跳动的。

点击后ds_submenu元素距离下面的距离明显变高出现跳动，在动画结束后又回归回去。

查看了一下jquery的animate源码，最后得出结论是inline-block导致的这个现象，如下的代码也会出现这种问题：

$(".ds_submenu").click(function(){
    var rect=this.getBoundingClientRect();
    $(this).css({width:rect.width,height:rect.height,overflow:"hidden"});
});

这个代码实现的跳动现象，你可以查看这个demo：inline-block和overflow:hidden引起的问题。

这种问题经测试，在IE,chrome下都存在，火狐由于没安装，所以没测试，预计也会有这种问题。

这个问题出现的原因是display:inline-block和overflow:hidden以及vertical-align:baseline导致的。

所以如果只要这三个条件不是同时满足就不会出现这种问题。inline-block改为block就不会出现这种问题，把vertical-align改为“top/bottom/middle”都能解决这个问题，去除overflow:hidden，也能解决这个问题。

至于这个问题涉及的浏览器渲染机制的原因，我就不得而知了。而且veritcal-align，overflow这两个样式比较重要，在我们的布局或者效果中，如果遇到什么期望之外的现象，你应该首先考虑这两个样式，如果确实是这两个样式导致的问题，那么就可以节约很多时间。我今天碰到这个问题的时候，就是因为没有往这方面想，以为是jquery的animate内部有什么特殊处理导致的，进而花费了很多时间在jquery的逻辑上。