Jquery скрыть / показать руины мои дивы?

Question

Недавно я добавил к сайту немного jquery, чтобы исправить ошибку рендеринга в IE7. К сожалению, по какой-то причине этот крошечный сценарий показа сломал некоторые элементы в нижней части, и я не могу понять, почему. Я уже потратил слишком много времени, играя с ним, проверяя, правильно ли выровнены ли div и т.д.

Может кто-нибудь сказать мне, почему этот скрипт изменит способ отображения моего кода?

<script type='text/javascript'>
$(document).ready(function() { $('#hide').show() })
</script>

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

http://alecsanger.com/shipcarsnow/index_nohide.html

http://alecsanger.com/shipcarsnow/index.html

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

Спасибо.

Answer 1

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

Создайте новую таблицу стилей, содержащую CSS, который решает эту проблему только в IE7. Затем поместите его в файл ie-7-fix.css и добавьте этот код в ваш HTML:

<! - [if lte IE 7]>

<! [ENDIF] ->

Answer 2

Используя Firebug, я вижу, что «рабочая» страница определяет div в widgetWrap div как высоту 120px. Некоторый JavaScript вводит

style="height: 120px;"

в каждый из этих widget делений.

На «испорченной» странице тот же самый JavaScript вводит

style="height: 0px;"

, что приводит к наложению текста, который вы видите. Теперь, какой JavaScript делает это, я не знаю, но я предполагаю, что это потому, что стиль тела на сломанной странице определяет стиль display:none.

Answer 3

ваши виджеты устанавливаются на высоту 0px, скрипт, который добавляет их, должен смотреть на высоту контейнера, и ни один из них не отображает высоту 0px width 0px;

$('.widget').height(120) после того, как .show () должен это исправить.

Перемещение main.js ниже $(document).ready(function() { $('#hide').show() }) тоже может помочь.

Answer 4

Манипуляции с равной высотой, которые вы выполняете, работают со скрытыми элементами, поэтому все высоты устанавливаются на 0.