在IE9中填充jQuery UI .addClass（）動畫+

Question

我有一個頁面上有幾個正方形<div> s，其中一些點擊時會隱藏與它們相關的內容（我們稱之爲「可擴展divs「）。隱藏的內容有時可能相當長，因此它位於單獨的<div>（「細節div」）中。所需的效果是對於「細節格」運行一個jQuery UI動畫.addClass('fullscreen', 'fast', 'swing')調用該應用以下規則之前先模仿的大小和的「擴張格」的位置：

.detail.fullscreen { 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    padding: 0 10%; /* all elements on page use box-sizing:border-box */ 
} 

的.addClass()動畫作品像Chrome，Firefox中的魅力，甚至在IE8中也很奇怪。但是，動畫在IE9 +中無法正常工作。瀏覽器似乎無法爲padding設置動畫效果，並且在動畫完成後直接粘貼屬性，導致非常醜陋的UI錯誤。請參閱的jsfiddle看到下面的bug在行動：

Fiddle

我最好的猜測是，這事做與IE渲染box-sizing: border-box;的方式，但這種風格是非常有用和工作在完全正常所有其他現代瀏覽器。我錯過了什麼嗎？

注意：我也注意到jQuery 2.x和jQuery UI 1.10.x在IE中的jsFiddle中不適用於我，但也許這是另一天的問題。

Answer 1

問題正在發生，因爲框模式的差異。正如你所說，它只是因爲填充。要解決此問題，請從細節<div>中刪除分頁，並在填充內容的細節<div>中添加一個div。這會給你想要的效果。