PIE.htc и jQuery анимация конфликта?

Question

У меня есть серия пуль, которая появится подряд. Я использую jQuery и jQuery UI в анимации пуль. В верхней пуле должны быть закругленные углы, которые я использую для выполнения CSS и PIE.htc. Это отлично работает во всех браузерах, отличных от IE, а также в IE8, но в IE7 появляется первая пуля с фоном примерно на 80% и узким и примерно на 95% коротким (или, возможно, крайне смещенным вверху слева).

Интересно, что если вы полностью изменяете размер окна броузера, фон защелкивается в нужное место (а не пули в контейнере с фиксированной шириной, поэтому я не изменяю размеры пуль здесь). Если я прокомментирую строку PIE.htc в своем CSS, пуля появится правильно, но мне нужны закругленные углы. См. 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; 
} 

Answer 1

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

Используйте этот JQuery плагин обойти углы во всех браузерах. Нет угловых изображений, использует вложенные dv для рисования границ. Это гибкий и простой в использовании. Он также добавил поддержку родного радиуса радиуса, поэтому он выполняется только в браузерах, которые не поддерживают опорный радиус.

Answer 2

Попробуйте добавить обратный вызов для изменения размера после эффекта, это должно привести к правильной перерисовке элементов.

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

Answer 3

я сделать этот ответ для тех, кто столкнется с этой проблемой и не может решить эти ответы, хотя этот вопрос вполне 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); 
}