文字不会环绕在IE8中的图像

我有一个带有动画文字的信纸图像，它环绕它。在Chrome，Safari和Firefox中，文本可以正确包装，但在IE8中，没有文字包装。所有文本都显示为一个大块。文字不会环绕在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切换到显示：block。将div显示为内联可以修复问题，但我似乎无法像简单地将它动画化一样。

来源

2011-04-23 Theopile

请尽可能张贴链接到页面。或者至少有更多的代码（CSS） – Maverick 2011-04-23 15:35:27

我可以告诉你为什么，但不知道如何解决它 - 虽然现在还在找，看看是否有一个最佳的解决方案..

所有这些jQuery函数是fadeIn，fadeOut和fadeTo需要一个MS（不透明）筛选工作这jQuery的适用这样的事情（尽管它是内联）：

.active { 
    zoom: 1; 
    filter: ; 
}

一个Microsoft filter将无法正常工作，而无需触发到真正hasLayout，这就是为什么它，jQuery的，同时增加了zoom: 1;。只要您在浮动物旁边的元素上设置了hasLayout=true，就会触发IE“浮动车”浮动模型，该模型展现出您所描述的内容，但文本不会自动换行！

它在每一个版本的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>

来源

2011-04-23 17:24:21 clairesuzy

文字不会环绕在IE8中的图像

回答

相关问题