JQuery работает как положено в IE8, но не в Chrome ... нужен кто-то, чтобы просмотреть мой код

Question

Я недавно обновлял сайт, чтобы он выглядел почти так же хорошо в IE8, как и в Chrome. Мне удалось правильно применить углы, но если вы посмотрите на http://clarkeyboy.zxq.net/test_longcatalogueitems.htm, вы заметите, что строки каталога отображаются, как и ожидалось, в IE8, но не в Chrome. В Chrome они, кажется, продолжаются вечно.

Может ли кто-нибудь взглянуть на jQuery / css на приведенной выше странице и сказать мне, где, по его мнению, я ошибаюсь? Мне жаль, что я не смог сократить CSS-файлы - они, как правило, довольно большие, но все стили (или, по крайней мере, большинство) необходимы на этой странице, чтобы продемонстрировать проблему.

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

Любая помощь будет принята с благодарностью.

С уважением,

Richard

PS Если у кого-нибудь есть какие-либо советы о том, как я могу улучшить свой код, но все же добиться того же эффекта, тогда, пожалуйста, скажите.

Меня особенно интересуют любые подсказки о том, как я могу добиться того, чтобы jQuery выполнял со строками каталога без JavaScript. В основном у меня есть изображение неизвестного размера (ширина и высота тегов img вставляются путем просмотра изображения на сервере и уменьшения его размера, если оно больше максимального размера эскиза), и я хотел бы получить описание для охватите всю высоту и на расстоянии до 20 пикселей от изображения.

Answer 1

Вы устанавливаете свойства в зависимости от ширины изображений в документе, и вы делаете это в режиме готовности к документу.

Псевдо-событие готовности документа запускается через некоторое время после заполнения HTML DOM; это не гарантирует, что все изображения загружены. В Chrome и других браузерах, которые поддерживают событие HTML5 DOMContentLoaded, обратный вызов, готовый для документа, обычно происходит раньше, чем в других браузерах, что означает больше шансов, что изображения еще не загружены.

Если вы хотите вызвать функцию, когда все на странице, включая изображения, готово, вы должны использовать событие загрузки ($(window).load(function() { ... });). Хотя я действительно не знаю, почему вы тут возитесь со скриптовым макетом, поскольку я не сразу вижу на этой странице ничего такого, чего нельзя было бы сделать простым CSS.