【转载】IE8 inline-block容器不撑开问题（利用重绘解决）

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

浏览器兼容问题就这么出现的，今天就碰上一个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" >              < a href = "http://www.monring.com/" >前端开发日志</ a >              < a href = "http://www.monring.com/" >前端开发日志</ a >              < a href = "http://www.monring.com/" >前端开发日志</ a >              < a href = "http://www.monring.com/" >前端开发日志</ a >              < a href = "http://www.monring.com/" >前端开发日志</ a >              < a href = "http://www.monring.com/" >前端开发日志</ a >          </ 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

转载于:https://www.cnblogs.com/ylsq/p/4991393.html