碰上问题 —— 分析问题 —— 解决问题。
浏览器兼容问题就这么出现的，今天就碰上一个IE8的问题。内容增加后，容器却不撑开。下面来看看详细的吧。
碰上问题：
问题： 有A,B,C三个容器，其中A设置了display：inline-block，A容器包含B容器，B容器包含C容器。此时C容器的高度增加时（脚本动态为C增加内容），A容器的高度居然不变？ 问题如下图，A容器下面的内容被覆盖了。
先看demo代码：
css部分
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.box { width: 300px; padding: 10px; display: inline-block; background: #ABC6DD;}.data { display: none;}.data a { display: block;} |
html部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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"> </div> </div></div><p> Monring, 不一样的早晨，不一样的前端</p> |
Javascript部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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'; } }} |
分析问题：
在点击加载数据后，我们看到了错误的显示页面。
此时，我们打开IE8的调试器，然后选中inline_block_box。再随便取消掉它的一个样式，发现它又能正常显示了。
分析：这里的问题就是，我们在加载内容的时候，IE8没有对inline_block_box进行重绘。
解决问题：
得到问题的根源解决问题就好办了。加行代码触发浏览器重绘就是了。看代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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的操作，我们也可以加入浏览器检测代码哦。
原网页：http://www.monring.com/front_end/ie8-inline-block.html