html文档中在absolute元素前面加个空格在inline-block的父元素下会换行显示，为什么？

Question

    <style>
        .redcircle{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
        .bor{
            display: inline-block;
        }
    </style>
    <div>
        <div class="bor" >
            <span>testline</span><i class="redcircle"></i>
        </div>
    </div>
    <br/><br/>
    <div>
        <div class="bor" >
            <span>testline</span> <i class="redcircle"></i>
        </div>
    </div>
    <!--表现不一-->

或者这样，在编辑器中常见的格式

    <div>
        <div class="bor" >
            <span>testline</span>
            <i class="redcircle"></i>
        </div>
    </div>

在chrome浏览器以及移动端内表现（火狐会无视掉空格，但是加个'<br>'表现一样）下面的那个红色的方块会换行显示。
父元素如果有float，position为absolute或fixed，display为table-cell或-webkit-box或者-webkit-inline-box也会有这种表现
但是overflow:hidden不会有这种表现，所以好像和bfc无关，但我不知为什么会这么表现，求解
ps:上传图片功能坏了。。。