Overflow:hidden Invalid solution in CSS IE6, IE7, IE8

Causes:

The Overflow:hidden property of the parent element is invalidated when the direct child element of the parent element or the style of the subordinate child element owns the Position:relative property.

Solution:

We found in IE 6 that the child element would exceed the height set by the parent element, even if the parent element was set to Overflow:hidden.
Fixing the bug is simple, using position:relative in the parent element, and resolving the bug

IE7 and IE6

Found in IE6 and IE7 inside Overflow:hidden invalid, or will be beyond the outer div

Later on the outer div plus position:relative to solve the

Temporarily add * number hack drop it, have time to study what is the cause of the problem

Well, the questions are all said, let me take a look at my example.

IE6 IE7 IE8 have problems with the solution.

Did you find the problem, look at my code below

The code is as follows	Copy Code
<div class= "product-pic album" > <div class= "thumb" > <ul> <li> <div class= "Shop-detail-img-outer" > <div class= "Shop-detail-img" > <p> <a title= "" rel= "{gallery: ' Gal1 ', smallimage: ' 312x312_39956512.jpg ', largeimage: ' 39956512.jpg '}" href= " Javascript:void (0) "> </a> </p> </div> </div> </li> ......... </ul> </div> </div>

The CSS code is as follows

The code is as follows	Copy Code
. album {Display:block} . album. thumb {width:100%; overflow:hidden; height:62px;} . Album. Thumb ul {margin:0; padding:0; width:310px; height:62px; overflow:hidden; display:block;} . album. Thumb ul li {float:left; margin:5px 5px 5px 0px; list-style:none;}

The beginning of a separate show this code found no problem, that is caused by the upper and lower impact, but not, after several twists and turns, found that the set Overflow:hidden layer has a positioning tag problem. Finally got it done.

Solution: only need to add positioning in the setting Overflow:hidden layer. As in. Album. Thumb ul add

The code is as follows	Copy Code
{position:relative;left:0px;top:0px;}

Can

Haha, finally finished, but we did not carefully look at this problem, keep hope that the need for friends can refer to.