"Reprint" IE8 inline-block container does not open up the problem (using redraw solution)

Encounter problems-Analyze problems-solve problems.

Browser compatibility problems just came up, and today there's a IE8 problem. When the content increases, the container does not open. Let's take a look at the details below.

Encounter problems:

Problem: There are a,b,c three containers, where a sets the Display:inline-block,a container containing the B container, and the B container contains the C container. When the height of the C container increases (the script dynamically adds content to C), the height of a container does not change. The problem is that the content below the a container is overwritten.

Look at the demo code first:

CSS Section

123456789101112

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

HTML section

1234567891011121314151617

<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 section

123456789101112131415

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‘;        }    }}

Analyze the problem:

After clicking Load data, we see the wrong display page.

At this point, we open the debugger for IE8, and then select Inline_block_box. Then you can cancel out one of its styles and find it shows up again.

Analysis: The problem here is that when we load the content, IE8 does not redraw the inline_block_box.

Solve the problem:

It's good to get the root of the problem and solve the problem. Adding lines of code triggers the browser to redraw. Look at the code

1234567891011121314151617

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";        }    }}

We have the following code to re -inline_block_box elements.

box.style.visibility = "visible";

Box.style.visibility = "Inherit";

Of course, we can also use other ways to trigger repainting. Of course, we only need to do this redrawing for IE8, we can also add browser detection code OH.

Original page: http://www.monring.com/front_end/ie8-inline-block.html

"Reprint" IE8 inline-block container does not open up the problem (using redraw solution)