文字不會環繞在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中的圖像

回答

相關問題