Float vs Inline-Block, with IE work around

Let's say you want to display images using css, which can be done using simple html tags <ul> <li>

and wrap them around using css's float properties.

.float-gallery li{
  list-style-type:none;
  border: 1px solid #CCCCCC;
  float:left;
  height: 100%;
  margin: 5px 15px;
  padding:10px;
}

• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  

Something interesting happens if images are of uneven height/width like here in this example:

• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  

But that's easy to fix all u now have to do is use display-inline. CSS property with so much potential only problem is it's not supported by IE 7 or IE 6. Here is the css with solution which work across all IE.

.inline-gallery li{
  list-style-type:none;
  border: 1px solid #CCCCCC;
  width: auto;
  min-height: inherit;
  display: inline-block;
  vertical-align: top;
  margin: 5px 15px;
  padding:10px;
  /* IE 7 hack to make it behave like inline-block */
  zoom: 1;
  *display: inline;
  /* IE 6 hack to fix height */
  _height: auto;
}

• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
•