在IE7中水平对齐图像的问题

Question

我试图将两个图像彼此对齐。在IE8 +和FF中，它们对齐正确。在Internet Explorer 7中，无论我使包含图像＃1和＃2的左侧div有多小，图像＃3都会被压低。

的jsfiddle：http://jsfiddle.net/bD87z/4/

<div style="width: 490px; padding-left: 15px; padding-right: 15px; background-color: #000; padding-bottom: 10px; "> 
    <div id="header"> 
     <div id="imageLeftContainer"> 
     <div id="image1" style=""></div> 
     <div style="margin-top: 7px;"> 
     <a href="http://www.google.com" target="_blank" style="text-decoration: none;"><img src="http://i40.tinypic.com/a40ntg.png" style="margin: 0; padding: 0; border: none;" /></a> 
     </div> 
    </div> 
    <a href="http://www.google.com" target="_blank" style="text-decoration: none;"><img id="image3" src="http://i41.tinypic.com/n5mzxi.png" /></a> 
    </div> 
</div> 

CSS：

#header 
{ 
clear: both;  
} 

#imageLeftContainer 
{ 
width: 292px; 
display: inline-block; 
margin: 0; 
padding: 0; 
margin-top: 20px; 
zoom:1; 
*display: inline; 
_height: 100%;   
} 

#image1 
{ 
width: 292px; 
height: 64px; 
margin: 0; 
padding: 0; 
margin-top: 5px; 
background: url(http://i40.tinypic.com/2z8w4uc.png); 
} 

#image3 
{ 
float: right; 
width: 185px; 
height: 108px; 
margin: 0; 
padding: 0; 
margin-top: 15px; 
border: none; 
} 

Answer 1

如果你把在div一个float:left包含图像1和图像2。然后把float:right上<a>标签上的图像3，它工作正常

的jsfiddle - >http://jsfiddle.net/bD87z/3/