在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/