PIE.htc和jQuery動畫衝突？

我有一系列的子彈會連續出現。我在項目符號的動畫中使用jQuery和jQuery UI。頂部的子彈需要有圓角，我使用CSS和PIE.htc來完成。這在所有非IE瀏覽器和IE8中都很適用，但在IE7中，第一個項目符號的背景顯示爲80％縮小，大約95％縮小（或者左上角極其偏移）。有趣的是，如果你根本調整了broswer窗口的大小，背景會捕捉到合適的位置（而不是子彈在一個固定寬度的容器中，所以我不會在這裏調整子彈的大小）。如果我在我的CSS中註釋掉PIE.htc行，那麼子彈正常顯示，但我需要圓角。請參閱this image。PIE.htc和jQuery動畫衝突？

相關代碼如下

$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow');

CSS

.bullet 
{ 
display:none; 
color:#6e6e6e; 
min-height:40px; 
font-size:2.5em; 
line-height:1.5em; 
font-weight:normal; 
position:relative; 
padding:25px 20px; 
margin-top:1px; 
background:#eeeeee; 
border-bottom:1px solid #fff; 
} 
.bullet.first{ 
margin-top:0; 
-moz-border-radius:8px 8px 0 0; 
-webkit-border-radius:8px 8px 0 0; 
border-radius:8px 8px 0 0; 
behavior: url(/Content/PIE.htc); 
} 
.bullet.currentBullet{ 
background:#d98452; 
color:#fff; 
}

來源

2011-01-05 Carsen

唉唉.HTC devilery！我寧願將IE支持或委託給其他開發人員。 – Raynos 2011-01-05 15:53:28

http://jquery.malsup.com/corner/

使用此jQuery插件來在所有瀏覽器中獲得圓角。沒有角落圖像，使用嵌套dv繪製邊框。它靈活且易於使用。它還增加了對原生邊界半徑的支持，因此它只在不支持支持邊界半徑的瀏覽器上執行。

來源

2011-02-02 08:11:22 Hussein

嘗試添加一個回調來調整大小後，這應該會導致元素重繪正確。

$([appripratebullet]).addClass('currentBullet') 
        .fadeIn('slow', 
          function() {  
           if ($.browser.msie) { 
            $(this).each(function() { $(this).resize(); }); 
           } 
          });

來源

2011-06-06 09:35:31

我做這個答案的人誰面對這個問題，不能被這些答案解決，即使這個問題是相當old.Even jquery.corner.js是偉大的，但不能用在輸入元素上。

使用這種簡單的方法動畫完成後可以使pie.htc完美：

function fixButton() { 
    if ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && document.all) 
     $("body").height("99.9%"); setTimeout(function() { $("body").height("100%"); }, 0); 
}

來源

2014-05-20 08:33:18 jarvanJiang

PIE.htc和jQuery動畫衝突？

回答

相關問題