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

如果你输入 float:left关于div包含图像1和图像2。然后放一个float:right关于<a> image3 上的标签工作正常

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