Question

我有一个包含动画文字的信纸图像。在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通过fadeIn切换显示从display：none到display：block。将div显示为内联可以解决问题，但我似乎无法简单地为它设置动画。

Answer 1

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

所有这些jQuery函数fadeIn，fadeOut和fadeTo都需要一个MS（不透明度）过滤器才能使jQuery应用这样的东西（虽然它是内联的）：

.active {
  zoom: 1;
  filter: ;
}

如果没有Microsoft filter触发为真，hasLayout将无效，这就是jQuery同时添加zoom: 1;的原因。只要在浮点旁边的元素上设置hasLayout=true，就会触发IE“buggy”浮动模型，如您所描述的那样展示，文本不会换行！

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

hasLayout不应该存在于IE8中，我可以说它自己的zoom不足以触发IE8中的脏行为，但实际上只要任何，添加过滤器（实际上上面的空白代码就是这样）效果是一样的。在非技术方面，我认为过滤规则仍然需要布局，所以它仍在应用，即使在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>

文本不会在IE8中包裹图像

1 个答案: