Проблемы с Jquery CSS в Chrome - PullRequest
       1

Проблемы с Jquery CSS в Chrome

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

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

Я использую ползунок диапазона, который запускает следующее, чтобы обновить заполнение контейнера DIV при изменении:

$('#preview > div').css('padding', ui.value + '%' );

В Firefox это работает нормально, но в Chrome обновляются не все элементы, чтобы отразить новое заполнение.Самый простой способ объяснить это с помощью рисунков:

Image 1 - Before DIV padding is increased. 1. На изображении 1 отступ составляет 5%, а заголовок и текст абзаца центрируются в DIV, как и должно быть.

Image 2 - After padding changed, only the first paragraph has recalculated its column width. Heading is off-center, and most paragraphs have retained their previous width, so overflowing. 2. На рисунке 2 я равномерно увеличил отступы вокруг текста, что должно привести к сжатию заголовка и абзацев в более узком столбце, но при этом по центру страницы.Как видите, только первый абзац корректно обновляется, когда я меняю отступы.

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

Есть ли команда, которую я могу использовать, чтобы заставить jQuery пересчитать расположение каждого элемента внутри DIV?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 19 января 2012

Использование процентов для заполнения может быть сложно.Попробуйте задать #preview жестко заданную ширину (например, 800px) и посмотрите, что получится.'padding' относится к 'ширине' родительского узла примененного элемента.

Когда увеличивается заполнение первого DIV, это может увеличить ширину содержащего элемента, и следующий DIV будет иметь другое заполнениерасчет.Это может зависеть от браузера.

Я предлагаю работать без процентов в этом случае.

0 голосов
/ 19 января 2012

Попробуйте изменить селектор на

$('#preview div')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...