IE Bug：toggleClass和溢出：隱藏問題

Question

IE遇到困難（9和10）。沒有測試IE8，但它可能是相同的情況。

簡介：

• 我裏面<div/>
• 一篇博客文章中，我限制<div/>的height與.height類設置在100px和overflow:hidden。
• 單擊「展開」鏈接後，.height類將通過jQuery刪除，並且<div/>將展開到其最大高度，以顯示整個博客文章。
• 在Firefox和Chrome中精美地使用。
• 在IE中，<div/>按預期展開，但展開前隱藏的所有圖像仍隱藏。
• 要使這些項目出現在IE中，您必須調整瀏覽器的大小或將<div/>從視口中滾動回來。

Here is a JSFiddle that showcases the problem

我使用這個代碼做jQuery的魔力：

$('#BLOG').on('click', '.expand', function() { 
    var $this = $(this); 
    $this.closest('.POST-WRAPPER').find('.post').toggleClass('height') 
               .toggleClass('overflow'); 
}); 

但要解決這個問題，我需要（在某種程度上），迫使IE瀏覽器「重繪」曾經隱藏部分<div/>擴大。

任何想法？

Answer 1

那麼，通常我不會建議一個黑客，但因爲這是一個錯誤，黑客似乎是好的：嘗試強迫IE重繪某處。一個解決方案，工程和在你的例子沒有任何明顯的副作用是在<img/>使用padding-left：

img { 
    padding-left: 0; 
} 

.height img { 
    padding-left: 1px; 
} 

Here is a demo。

---

旁註：您應該重新考慮類名。更好地使用「擴展」或「摺疊」或其他有意義的東西。而且你不需要overflow班，因爲overflow: visible無論如何都是default value。可能會像this fiddle。