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

Today, we do a shopping mall to realize the use of overflow:hidden but how can not reach our thinking of my effect, online check the original this is IE bug Oh, let's see how to deal with it.
-
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 off, 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 solutions to problems.

Did you find the problem, look at my code below

The code is copied as follows
<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) ">
<img alt= "" src= "45x45_39956512.jpg" >
</a>
</p>
</div>
</div>
</li>
.........
</ul>
</div>
</div>

The CSS code is as follows

The code is copied as follows
. 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 finished.

Solution: Simply add positioning to the set Overflow:hidden layer. As in. Album. Thumb ul add

The code is copied as follows
{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.