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

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

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

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

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

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

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

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

Это 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);
}

jquery jquery-animate css3pie
person Jimmie Jephson    schedule 17.01.2012    source источник
comment
Вы пытались поместить position:relative в родительский элемент? Я обнаружил, что это иногда помогает.   -  person Rikard Uppström    schedule 17.01.2012
comment
Да, как я уже сказал, я уверен, что все элементы имеют position:relative, когда им это нужно. Проблема не в этом.   -  person Jimmie Jephson    schedule 17.01.2012

Ответы (2)


arrow_upward
0
arrow_downward

Это может быть проблема с двойным полем, когда начинается анимация, можете ли вы опубликовать стиль анимации?

#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' : ?
});
person Philip    schedule 17.01.2012
comment
Да, я использую slideToggle только с медленным. Я постараюсь посмотреть, изменится ли что-то с вашими обновлениями. - person Jimmie Jephson; 17.01.2012
comment
Сейчас работает лучше, но не каждый раз. - person Jimmie Jephson; 17.01.2012
comment
Хорошо, спасибо, я постараюсь посмотреть, что я могу сделать из этого. Я обновлю, если я что-то найду. - person Jimmie Jephson; 17.01.2012

arrow_upward
0
arrow_downward

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

 $('.your_div').animate(function () {
            if ($.browser.msie) {
                $(this).each(function () { $(this).resize(); });
            }
        });
person user1481172    schedule 08.08.2013