重绘布局与IE8 inline-block不撑开bug修复实例页面

CSS代码：

.box { display: inline-block; padding: 10px; background-color: #f0f3f9; }
.box p { width: 256px; }
.dn { display: none; }
.wait { background-color:#fff; }
                

HTML代码：

<div id="box" class="box">
    <div class="inner">
        <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
        <p>在... <span id="more" class="dn">新浪员工刘彬表...</span></p>
        <p>
            <a href="javascript:" data-rel="more">展开更多(bug)</a> 
            <a href="javascript:" data-rel="more">展开更多(bug fixed)</a>
        </p>
    </div>
</div>
<p class="wait">我是在下面等shi的~</p>
                

JS代码：

(function(document) {
    var eleBox = document.getElementById("box"),
        eleMore = eleBox && eleBox.getElementsByTagName("a"),
        length = eleMore && eleMore.length;
        
    if (!length) return;
        
    for (var i=0; i<length; i+=1) {
        eleMore[i].onclick = function() {
            var idMore = this.getAttribute("data-rel"), target = null;
            if (idMore && (target = document.getElementById(idMore))) {
                var html = this.innerHTML;
                if (target.style.display === "inline") {
                    target.style.display = "none";
                    this.innerHTML = html.replace("收起", "展开");
                    if (/fixed/.test(html)) {
                        eleBox.style.visibility = "inherit";    
                    }
                } else {
                    target.style.display = "inline";
                    this.innerHTML = html.replace("展开", "收起");
                    if (/fixed/.test(html)) {
                        eleBox.style.visibility = "visible";    
                    }
                }
            }
            return false;
        };
    }
})(document);