Question

如果您使用IE7查看http://wilwaldon.com/ie7sucks/inner7ie.html，您会注意到文本包装了图像。对于所有其他浏览器，它没有。我希望它不会在IE7中包装图像。我已经使用了ie dev工具，但无法弄清楚是什么导致了故障。

任何帮助都将受到赞赏，我将永远感激。

谢谢！

Answer 1

它看起来不像是包裹着我。环绕是单个段落环绕图像的位置。这里发生的是你有2个段落，第一个段落比图像长，因此推动图像下方的底部段落。

尝试将第一段的大小加倍，看看它是否包含在Firefox和IE7上。我想可能不会。

因此，您的问题是您在.mainright中的所有段落都有一个底部填充。 Firefox在段落的高度中包含此填充，而IE7错误地将其添加到底部。这意味着，在Firefox中，第一段不足以推动图像下方的第二段，而在IE7中，它足够长。

如果Firefox正在显示，请尝试删除此底部填充。然后，如果要保留精选标题和聚光灯图像之间的间距，请添加以下内容：

.featuredbold, .spotlightbox {margin-bottom:36px;}

更新：要容纳动态内容，您必须执行以下操作之一：

1）每个框有一个段落，然后使用<br /><br />来模拟段落。

2）将所有段落放在div中，并将生成内容的任何内容更改为该div的类。例如，您可以将“.fat”和“.thin”作为类，然后将适当的宽度与这些类相关联，以便段落无法包装，因为它们会受到div的约束。你还必须将div浮动到右边。

解决方案2要好得多，但您可能无法实现它，具体取决于您的设置。

Answer 2

删除或重新设置：#mainright p {padding-bottom:36px;}。

此外，您还有一些验证错误。

Answer 3

http://www.w3schools.com/css/pr_class_display.asp

No versions of Internet Explorer (including IE8) support the property values 
"inline-table", "run-in", "table", "table-caption", "table-cell", 
"table-column", "table-column-group", "table-row", or "table-row-group".

通过在P标签上设置table-row-group，它们不再采用padding-bottom，但IE会这样做。

您的代码结构也是错误的。你需要这样的东西：

<div class="spotlightbox">
  <img style="float: left">
  <div style="float: left">Text here</div>
  <div style="clear: both;"></div>
</div>

IE7文本对齐问题 - 文本包装，不应该

3 个答案: