inline-block的绝对定位子元素

html代码如下：

<a href="javascript:;" class="ctrl-i">
            <img src="img/14.jpg" alt="">
</a>
css代码如下：
 .ctrl-i{
    display: inline-block;
    width: 150px;
    height: 13px;
    background-color: #666;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    /*position: relative;*/
}
.ctrl-i img{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 50px;
    z-index: 1;
    -webkit-box-reflect:below 0px -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(transparent),
        color-stop(50%,transparent),
        to(rgba(255,255,255,0.3))
        );
}

去掉a标签的relative，图片宽度就不会变成150px，而是原本宽度，加上relative就没有问题。绝对定位脱离文档流我知道但连继承父元素宽度都不行么？还是inline-block的锅