28
2013
03

IE8 inline-block容器不撑开问题(利用重绘解决)

碰上问题 —— 分析问题 —— 解决问题。

浏览器兼容问题就这么出现的,今天就碰上一个IE8的问题。内容增加后,容器却不撑开。下面来看看详细的吧。


碰上问题:

问题: 有A,B,C三个容器,其中A设置了display:inline-block,A容器包含B容器,B容器包含C容器。此时C容器的高度增加时(脚本动态为C增加内容),A容器的高度居然不变? 问题如下图,A容器下面的内容被覆盖了。

image


先看demo代码:

css部分

.box {
    width: 300px;
    padding: 10px;
    display: inline-block;
    background: #ABC6DD;
}
.data {
    display: none;
}
.data a {
    display: block;
}

html部分

<div id="inline_block_box" class="box">
    <div id="child_box">
        <input type="button" id="btn_loader" value="加载数据" />
        <h1> Monring, 不一样的早晨,不一样的前端 </h1>
        <div id="data_box" class="data">
            <a href="http://monring.com/">前端开发日志</a>
            <a href="http://monring.com/">前端开发日志</a>
            <a href="http://monring.com/">前端开发日志</a>
            <a href="http://monring.com/">前端开发日志</a>
            <a href="http://monring.com/">前端开发日志</a>
            <a href="http://monring.com/">前端开发日志</a>
        </div>
    </div>
</div>
<p>
    Monring, 不一样的早晨,不一样的前端
</p>

Javascript部分

window.onload = function() {
    var data = document.getElementById('data_box');
    data.style.display = 'none';
    var btnLoader = document.getElementById('btn_loader');
    btnLoader.onclick = function() {
        if(this.value == '加载数据') {
            this.value = '隐藏数据';
            data.style.display = 'block';
        } else {
                                          
            this.value = '加载数据';
            data.style.display = 'none';
        }
    }
}

分析问题:

在点击加载数据后,我们看到了错误的显示页面。

image

此时,我们打开IE8的调试器,然后选中inline_block_box。再随便取消掉它的一个样式,发现它又能正常显示了。

2.png

3.png

分析:这里的问题就是,我们在加载内容的时候,IE8没有对inline_block_box进行重绘。


解决问题:

得到问题的根源解决问题就好办了。加行代码触发浏览器重绘就是了。看代码

window.onload = function() {
    var data = document.getElementById('data_box');
    var box = document.getElementById('inline_block_box');
    var btnLoader = document.getElementById('btn_loader');
    btnLoader.onclick = function() {
        if(this.value == '加载数据') {
            this.value = '隐藏数据';
            data.style.display = 'block';
            box.style.visibility = "visible";
        } else {
          
            this.value = '加载数据';
            data.style.display = 'none';
            box.style.visibility = "inherit";
        }
    }
}

我们下面代码来进行重新inline_block_box元素。

box.style.visibility = "visible";

box.style.visibility = "inherit";

当然,我们也可以使用其他的方式来触发重绘。当然我们这个重绘只需要针对IE8的操作,我们也可以加入浏览器检测代码哦。

« 上一篇下一篇 »

相关文章:

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。