Случайная ошибка абсолютного позиционирования CSS в IE8

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

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

Если я посмотрю на свойства элемента на панели инструментов разработчика IE, я увижу, что установлены правильные свойства css — они просто не применяются. Если я изменю размер окна браузера, элемент переместится в правильное положение, так что это выглядит как настоящая ошибка рендеринга.

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

Любые идеи, как я могу бороться с этим, или кто-нибудь еще сталкивался с подобным?


jquery css internet-explorer css-position internet-explorer-8
person BrynJ    schedule 13.10.2009    source источник

Ответы (4)


arrow_upward
3
arrow_downward

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

e.g.

  1. скрыть объект
  2. установить положение
  3. показать объект

Объект будет отображаться в левом верхнем углу до тех пор, пока положение не будет установлено снова или размер окна не будет изменен, что заставит IE пересчитать положение.

person Jonathan Fingland    schedule 13.10.2009
comment
Да, это звучит логично — как мне обеспечить, чтобы функция jquery, которая добавляет элементы, изначально завершалась до переключения элемента? (jquery/javascript точно не моя сила). - person BrynJ; 13.10.2009
comment
Я вижу, вы добавили более подробное объяснение, спасибо. Чтобы объяснить, с чем я работаю, у меня есть форма с вкладками (с использованием вкладок jQuery), а также плагин замены элемента выбора под названием AddIncSearch. AddIncSearch вызывается при переключении вкладок, и этот вызов добавляет абсолютно позиционированные элементы. Теперь, теоретически, поскольку обработка событий выполняется AddIncSearch, она должна работать только после правильной инициализации выбранных элементов, но, похоже, это не так. - person BrynJ; 13.10.2009
comment
один вопрос: вы абсолютно позиционируете элементы или ваш виджет AddIncSearch выполняет позиционирование? - person Jonathan Fingland; 13.10.2009
comment
Плагин AddIncSearch выполняет позиционирование (я могу добавить фрагмент кода к моему вопросу, если вы думаете, что это поможет). - person BrynJ; 13.10.2009
comment
нет, но попробуйте расположить элемент AddInc сразу после показа вкладки - person Jonathan Fingland; 13.10.2009
comment
По сути, это то, что я уже делаю — AddIncSearch вызывается в событии tabsshow. Есть ли что-нибудь еще, что я могу попробовать? - person BrynJ; 13.10.2009
comment
событие tabsshow может срабатывать непосредственно перед отображением вкладок. Попробуйте поместить свой код изменения позиции в setTimeout(func, 0), чтобы вывести его из потока - person Jonathan Fingland; 13.10.2009
comment
Вау, вроде работает, спасибо. Я проведу еще несколько тестов, и если все будет хорошо, я приму ваш ответ. - person BrynJ; 13.10.2009
comment
Хм, еще несколько тестов показали, что это работает не всегда - это субъективно, однако я бы сказал, что с этим кодом эффект уменьшается. Любые другие идеи? - person BrynJ; 13.10.2009

arrow_upward
1
arrow_downward

Пробовали ли вы специальные свойства IE8:

-ms-background-position-x: 1px; -ms-background-position-y: 29px;

Они работают только в IE8 и решают именно эту проблему.

person serraosays    schedule 30.12.2009

arrow_upward
1
arrow_downward

Была аналогичная проблема -> текстовое поле IE8 было недоступным для редактирования (когда оболочка моего приложения имеет позицию: абсолютная). Щелчок работал только в бордюре. Залить цветом и сделать прозрачным тоже не получилось. С этим изменением типа документа проблема исправлена.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Источник: http://www.codingforums.com/showthread.php?p=1173375#post1173375

person Muthukumar Arumugam    schedule 23.12.2011

arrow_upward
0
arrow_downward

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

person Globalz    schedule 28.01.2010