JoshBee

偏偏聽到「客戶就是用ie7」這種很想去幫客戶安裝一下 chrome 的話語
沒辦法只好一定要找出解法了~
這個bug扒文找了很久~ (主要是因為不知道keyword要打什麼？)

終於找到相關的資訊：
http://laotan.net/wiki/WebRebuild/IEBug%E4%B9%8B%E4%B8%8D%E5%AE%88%E8%A7%84%E5%88%99%E7%9A%84%E5%85%94%E5%AD%90
http://laotan.net/wiki/uploads/WebRebuild/IE_non_disappearing_content_bug_demo.html

不守規則的兔子~名字取得還真好
大概就是說在ie7下 內外兩層div都有使用position:relative或是absolute
當先把外層設 display:none 然後再把內層也設 display:none 時
再把外層設成 display:block 會發現~
明明內層設了 display:none 卻還是一樣會出現~

文章最後一句寫著：
其實以上說的我都不太贊成，解決辦法也不是不用position定位和display，應該根據實際情況，適當改變邏輯，還是可以避開bug的出現的

我只好來思考一下我遇到的情況~ 我的每個單元都有自己的 id 例如：#rule、#products、#try
單元裡的內容又有很多個 id 像產品圖、說明圖之類的~
當我轉場的時候例如把 #rule fadeOut 然後 #products fadeIn 在ie7下就會出現這個bug~
#products 裡的內容明明預設是 display:none 卻還是直接出現~

解法：
(1) 當要把外層的 #rule、#products 使用 fadeOut 時
要先把裡面的內容物 fadeOut 或設成 display:none 
從內而外的消失  就可以避開這個bug了

但想到每個單元裡的每個 id 都要先設定，物件一多就很麻煩了~

(2) 我試著在 #rule 外面再包一層div
然後用這層 div 去fadeIn、fadeOut 竟奇蹟式的避開這個bug了~