Странность отображения IE7 (пример прилагается)

Question

Я работаю над заменой Flash-апплета на основе Javascript. Сайт имеет проблемы с рендерингом только в IE, где он демонстрирует поведение, которое приводит меня в тупик.

http://janetalasher.com/new/content/portfolio/artcloth/ (Это страница)

Что делает IE так странно (только в этом случае)? Если вы посмотрите в Firefox, справа вы увидите таблицу изображений с миниатюрами. IE6 и IE7 не показывают это ... , если вы не находитесь в режиме предварительного просмотра . Это не глюк CSS - я отключил все таблицы стилей, и ошибка все еще происходит. Я бы предоставил более подходящий исходный код, но я даже не знаю, в чем проблема. Я подозреваю, что файлы .js (если это поможет):

/common/gallery/display.js
/common/gallery/loader.js

Ладно - обновление: оно определенно корректно отображается только в режиме предварительного просмотра. Может кто-нибудь пожалуйста объяснить мне, в каком мире это происходит? Div присутствует в обычном режиме, но таблица не будет отображаться. Использование панели инструментов разработчика IE подтверждает это, и все ячейки присутствуют.

Answer 1

Согласно Microsoft Script Editor, внутри jQuery есть ошибка, вызванная этой строкой:

$('#lower').css('padding-left' , paddingLeft - (lowerRightProtrusion < 0 ? 0 : lowerRightProtrusion) + "px");

Так как lowerRightProtrusion равен NaN, а NaN <0 рассчитывается как false, вы фактически устанавливаете padding-left в значение «NaNpx». Не вычисляет;) </p>

См. Мой предыдущий ответ для получения информации о MS Script Editor: Использование IE8 'Developer Tools' для отладки более ранних версий IE

Answer 2

Попробуйте добавить точки с запятой здесь:

function loadGallery(xml)
{
    thumbpath = $(xml).find("thumbpath").attr('dir') // add here
    imagepath = $(xml).find("imagepath").attr('dir') // here
    detailpath = $(xml).find("detailpath").attr('dir') // and here
    cSheet = contactSheet(xml);
    $('.contactSheet')[0].appendChild(cSheet);    
            display($(cSheet).find('img')[0]);
}

Также в этой строке:

jQuery.get('/new/content/portfolio/artcloth/gallery.xml' , 'xml' , function(data) { loadGallery(data); } ) // missing one here too

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

Javascript на самом деле не требует их, но ради здравомыслия и точного знания, что происходит с вашим кодом, было бы неплохо вставить их. Например:

return
1

Может стать:

return;
1;

Что вообще ничего не возвращает, не совсем нужный эффект.

Answer 3

В /common/css/generic.css:

div#information 
{
margin-left:188px;
m\argin-left:94px; <------ not sure if that would cause this, but thought i would point it out 
}

Answer 4

Казалось бы, IE не подбирает стили. Если я открою страницу в Chrome, в описании div появится стиль «float: left». однако в IE это не так.

В настоящее время у вас есть включения в div в теле документа. Если это возможно, попробуйте переместить их в голову. Я говорю о тегах ссылки и скрипта, которые являются прямым потомком div id = "pageHead".

(я использую IE6 и панель инструментов разработчика для получения этой информации)