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

正如你所看到的：没有理由，为什么图像应该在Bottom中更多，然后另一个，你看到左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>

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

Answer 3

浏览器对各种HTML元素使用不同的默认CSS。我要做的第一件事是添加一个好的重置，以便所有元素都以相同的基本设置开始。这将需要调试过程中的一些猜测工作。在剩下的CSS之前添加它 -

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

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

图像差异IE7到IE8 / IE9 / FF4

3 个答案: