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

Question

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

Интересно, что если вы вообще измените размер окна broswer, фон зафиксируется в нужном месте (не пули находятся в контейнере фиксированной ширины, поэтому я не буду изменять размеры пуль здесь). Если я закомментирую строку PIE.htc в моем CSS, пуля будет отображаться правильно, но мне нужны закругленные углы. Смотрите это изображение.

Соответствующий код следует

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 для рисования границ. Это гибкий и простой в использовании. Также добавлена ​​поддержка встроенного border-radius, поэтому он выполняется только в браузерах, которые не поддерживают поддержку border-radius.

Answer 2

Попробуйте добавить функцию обратного вызова, чтобы изменить размер после эффекта, это должно привести к корректному перерисовыванию элемента (ов).

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

Answer 3

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