Конфликт анимации PIE.htc и jQuery? - PullRequest
Новая
       14

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

3 голосов
/ 05 января 2011

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

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

Ответы [ 3 ]

4 голосов
/ 02 февраля 2011

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

Используйте этот плагин jquery, чтобы закруглить углы во всех браузерах. Нет угловых изображений, использует вложенный dv для рисования границ. Это гибкий и простой в использовании. Также добавлена ​​поддержка встроенного border-radius, поэтому он выполняется только в браузерах, которые не поддерживают поддержку border-radius.

1 голос
/ 06 июня 2011

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

$([appripratebullet]).addClass('currentBullet')
                     .fadeIn('slow', 
                             function() {       
                                 if ($.browser.msie) {
                                     $(this).each(function() { $(this).resize(); }); 
                                 }
                             });
0 голосов
/ 20 мая 2014

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