IE7与IE8 / IE9 / FF4的图像差异

Question

我对IE7的DIV容器中的简单图像有疑问。

我在首页上有几次，下面是一个示例：

 <div id="divSearchBottomLinks" class="divSearchBottomLinks">
   Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
   <div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
       <img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
          style="border: 1px red solid;" />
   </div>
</div>

CSS是：

.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}

外观如下： http : //s3.imgimg.de/uploads/2204cc79eJPG.jpg

如您所见：没有理由，为什么图像的底部应该比其他图像高，您看到的是FF4（在IE8 / IE9 / Opera9 / Opera10中是相同的），而在右边的IE7中似乎对此有问题。

我看不到如何解决它，我只能从那里看一些想法。

Answer 1

由于某种原因，向右浮动的元素将浮动在IE7中该行的文本下方。该文本占据容器的整个宽度，就像div元素默认情况下一样，然后将浮动元素向下推。

也将图像前的文本放在div元素中，然后将其浮动到左侧，这样就不会向下浮动到右侧的元素。

Answer 2

我会尝试使用类似这样的方法：

<div id="bottomLinks">
  <p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
  </p>
  <img src=".." />
</div>
<style>
div#bottomLinks {
  overflow: hidden;
  }
  div#bottomLinks p {
    float: left;
  }
  div#bottomLinks img {
    float: right;
  }
</style>

您现在遇到的问题可能是因为width为99％，并且第一个元素没有浮动。

Answer 3

浏览器针对各种HTML元素具有不同的默认CSS。 我要做的第一件事是添加一个很好的重置，以便所有元素都以相同的基本设置开始。 这将消除调试过程中的一些猜测工作。 在其余CSS之前添加此代码-

http://meyerweb.com/eric/tools/css/reset/

接下来，您应始终在浮动容器中指定宽度。 如果您未正确指定宽度，则IE尤其会出现问题。