Это потому, что когда jQuery анимирует (ваша функция показа / скрытия использует «slow»), это заставляет анимированные элементы «набирать макет», это в свою очередь приводит к тому, что текст не переносится: Reference
например. ваш pr_content
div показывает что-то вроде этого с помощью встроенных стилей (в IE7 он отличается в IE8)
<div style="filter: ; zoom: 1; display: block" class="pr_content">
Существуют различные исправления, но есть также различные ошибки, я пробовал несколько различных исправлений, таких как удаление фильтра, но есть также ошибка с функцией removeAttr (), я подумал, может быть, удалив style attribute
и используя .css()
для применения display:block
или display: none;
может работать, но не радость, хотя YMMV
Вот ваш существующий jQuery: (из idccoupon / scripts.js)
$('.pr_content').hide();
$('.moreteaser').click(function() {
$('.pr_teaser').hide();
$('.pr_content').toggle("slow");
$(".pr_content").attr("zoom","");
$('.moreteaser, .lessteaser').toggle();
});
$('.lessteaser').click(function() {
$('.pr_content').toggle("slow");
$('.pr_teaser').show();
$('.moreteaser, .lessteaser').toggle();
});
Примечание: attr("zoom", "");
, который, как я знаю, является рекомендуемым решением этой проблемы, не работает, чтобы удалить свойство zoom
, насколько я могу судить ... это то, что я обнаружил, пытаясь удалить другие свойства.
Я получил половину работы (то есть без улучшения для IE), удалив «медленную» команду только для IE, просто означает, что они получают мгновенное отображение / скрытие, а не «гладкую»… это или просто позволяют пользователям IE получить распакованный контент, как сейчас, может быть самое простое решение?
в любом случае вот код, который я использовал на тот случай, если вы захотите его попробовать:
$('.pr_content, .lessteaser').hide();
$('.moreteaser, .lessteaser').click (function() {
if (jQuery.browser.msie) {
$('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle();
} else {
$('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle("slow");
}
});