Ошибка IE7 с анимацией CSS3Pie и jQuery - PullRequest
Новая
       39

Ошибка IE7 с анимацией CSS3Pie и jQuery

1 голос
/ 17 января 2012

Привет всем, я надеюсь, что кто-то может помочь мне в этом вопросе.

Я использую CSS3Pie, чтобы получить скругленные углы на коробке, и все отлично работает во всех браузерах, включая IE7.Но когда вы добавляете анимацию (на этот раз slideToggle) к элементу внутри моей коробки, IE7 начинает действовать, как если бы вы не делали, но position:relative.Элемент становится огромным, 5000px x 10000px +++.Я уверен, что все элементы имеют position:relative, когда им это нужно.

Я уже видел эту ошибку раньше, и мы нашли обходной путь, который раньше включал некоторые исправления JS для файла CSS3Pie, но я не могу найти его снова.

Я благодарен за любую помощь, которуюЯ могу получить.

Спасибо, Джимми

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

You cans see on the image below that the gray background doesn't end where the box end it's just continues out over the other elements on the site.

Это CSS для элемента, который скользит вниз 

#grades .form-content {
    margin:0 10px;
    padding:10px;
    width:93.8%;
    background:#fff;
}

Это CSS для коробки: 

.m-pc {position:relative;}

.m-pc .m-c {
    position:relative;
    padding:38px 21px 10px;
    margin-bottom:25px;
    border:1px solid #cbcbcb;
    border-top:none;
    -moz-box-shadow:0 1px 5px #e3e4e3; /* FF3.5+ */
    -webkit-box-shadow:0 1px 5px #e3e4e3; /* Saf3.0+, Chrome */
    box-shadow:0 1px 5px #e3e4e3; /* Opera 10.5, IE 9.0 */
    background:#f6f6f6;
    behavior:url(/css/vendor/pie.htc);
}

.m-pc .m-h {
    position:relative;
    border:1px solid #cbcbcb;
    -webkit-border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    border-radius:6px 6px 0 0;
    background:#eee;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e5e5e5));
    background:-webkit-linear-gradient(#eee, #e5e5e5);
    background:-moz-linear-gradient(#eee, #e5e5e5);
    background:-ms-linear-gradient(#eee, #e5e5e5);
    background:-o-linear-gradient(#eee, #e5e5e5);
    background:linear-gradient(#eee, #e5e5e5);
    -pie-background:linear-gradient(#eee, #e5e5e5);
    behavior:url(/css/vendor/pie.htc);
}

Ответы [ 2 ]

0 голосов
/ 08 августа 2013

Я не могу найти сообщение сейчас, но помощь от другого автора исправила аналогичную проблему для меня. Добавьте обратный вызов в вашу анимацию, чтобы пересчитать позицию: 

 $('.your_div').animate(function () {
            if ($.browser.msie) {
                $(this).each(function () { $(this).resize(); });
            }
        });
0 голосов
/ 17 января 2012

При запуске анимации может возникнуть проблема с двумя полями. Можете ли вы опубликовать стиль анимации? 

#grades .form-content {
    margin:0 10px;
    *margin:0 5px;
    *zoom:1;
    padding:10px;
    *padding:5px;
    width:93.8%;
    background:#fff;
}

Проблема, кажется, исходит от самого стиля анимации, или вы просто используете slideToggle? 

.animate({
    'left/right/top/bottom' : ?
});
...