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)