2011-01-05 24 views
3

私は一連の弾丸を連続して表示します。私は、箇条書きのアニメーションでjQueryとjQuery UIを使用しています。先頭の箇条書きには、CSSとPIE.htcを使用している角を丸くする必要があります。これは、IE7以外にもIE以外のブラウザではうまくいきますが、IE7では最初の行頭が80%縮小し、約95%が短くなります(あるいは、左上が極端にオフセットされている)。PIE.htcとjQueryアニメーションの競合?

興味深いことに、broswerウィンドウのサイズを変更すると、背景が適切な場所にスナップされます(箇条書きは固定幅のコンテナにはないので、ここでは箇条書きのサイズを変更していません)。 CSSでPIE.htc行をコメントアウトすると、箇条書きが正しく表示されますが、角が丸くなる必要があります。 this imageを参照してください。

関連するコードは

JS

$([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; 
} 
+1

.HTC devileryああ! IEのサポートを落としたり、別の開発者に委譲したいと思っています。 – Raynos

答えて

4

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

に、このjQueryプラグインを使用しますが、以下のすべてのブラウザで角を丸めるコーナーイメージはありません。ネストされたdvを使ってボーダーを描画します。柔軟で使いやすいです。また、ネイティブborder-radiusのサポートが追加されているため、border-radiusをサポートしていないブラウザでのみ実行されます。

1

エフェクトの後にサイズ変更を行うためにコールバックを追加してみてください。これにより、要素が正しく再描画されるはずです。

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

私はこの質問はかなりjquery.corner.jsをold.Evenされていても、この問題に直面し、これらの答えで解決できない人のため、この答えは素晴らしいですが、それは使用することはできませんします入力要素上にある。

pie.htc完璧にすることができ、アニメーションが完了した後、この簡単な方法を使用:

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