在 IE8 中文本不会环绕图像答案

【问题标题】：Text Won't Wrap Around Image in IE8在 IE8 中文本不会环绕图像
【发布时间】：2011-04-24 01:29:43
【问题描述】：

我有一个带有动画文字的文具图像，环绕在它周围。在 Chrome、Safari 和 Firefox 中，文本可以正确换行，但在 IE8 中，没有任何文本换行。所有文本都显示为一个大块。

<img src="someimage.png" width="200" height="200" align="left"/>
<div class="animate active">
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>
<div class="animate">
<h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>

jQuery 通过淡入淡出将显示从 display:none 切换到 display:block。将 div 显示为内联可以解决问题，但我似乎无法简单地对其进行动画处理。

【问题讨论】：

如果可能，请发布页面链接。或者至少有更多代码 (CSS)

标签： jquery css internet-explorer word-wrap

【解决方案1】：

我可以告诉你原因，但不能告诉你如何解决 - 虽然我仍在寻找是否有最佳解决方案..

fadeIn、fadeOut 和 fadeTo 的所有这些 jQuery 函数都需要一个 MS（不透明度）过滤器才能工作，jQuery 会应用类似这样的东西（尽管它是内联的）：

.active {
  zoom: 1;
  filter: ;
}

如果没有hasLayout 触发为真，Microsoft filter 将无法工作，这就是为什么它，jQuery，同时添加zoom: 1;。一旦您在浮动旁边的元素上设置hasLayout=true，您就会触发 IE“错误”浮动模型，如您所描述的那样，文本不会换行！

到目前为止，它发生在每个 IE 版本中（注意：不确定 9）

hasLayout 不应该存在于 IE8 中，我可以说 zoom 本身不足以触发 IE8 中的肮脏行为，但事实上 any ，添加过滤器（确实上面的空白代码就是这样做的）效果是一样的。在非技术方面，我认为过滤规则仍然需要 layout 所以它仍然被应用，即使在 IE8 中

我尝试了一些方法，包括使用 -ms-filter 表示法，但找不到任何可行的方法，如果效果只能使用 opacity 完成，我想你不会找到任何东西

The jQuery toggles the display via fadeIn from display:none to display:block.

它不仅这样做 - 如果它只是这样做，那么这将起作用，一旦涉及“过滤器”，你就会遇到这个问题

测试代码：

img {
float: left;
width: 200px;
height: 200px;
}

.active {
zoom: 1;
/*filter: alpha(opacity=50); /* uncomment this to see it happen in IE8 too */

/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - also tried but the effect was the same*/
}

HTML：

<img src="someimage.png" />
<div class="active">
    <h1>Long div Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>

【讨论】：