Проблема с горизонтальным выравниванием изображений рядом друг с другом в IE7 - PullRequest
Новая
       14

Проблема с горизонтальным выравниванием изображений рядом друг с другом в IE7

2 голосов
/ 27 февраля 2012

Я пытаюсь выровнять два изображения рядом друг с другом. В IE8 + и FF они выровнены правильно. В Internet Explorer 7 изображение № 3 выталкивается вниз, независимо от того, насколько маленьким я делаю левый div, содержащий изображения № 1 и № 2.

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;   
}

1 Ответ

2 голосов
/ 27 февраля 2012

Если вы положите float:left на div, содержащее image1 и image2. Затем поместите float:right на тег <a> на изображении 3, он отлично работает

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

...