IE8 CSS Абсолютное Позиционирование Случайная Ошибка

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

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

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

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

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

4 ОТВЕТА

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

например

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

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

3
13.10.2009 10:59:26
Да, это звучит логично - как бы я позаботился о том, чтобы функция jquery, добавляющая элементы, изначально завершала работу до переключения элемента? (JQuery / Javascript определенно не моя сила).
BrynJ 13.10.2009 11:05:55
Я вижу, вы добавили более подробное объяснение, спасибо. Чтобы объяснить далее, с чем я работаю - у меня есть форма с вкладками (с помощью вкладок jQuery), а также плагин выбора элемента замены с именем AddIncSearch. AddIncSearch вызывается, когда вкладки переключаются, и этот вызов добавляет абсолютно позиционированные элементы. Теперь, теоретически, поскольку обработка событий выполняется AddIncSearch, она должна работать только после правильной инициализации элементов select - но, похоже, это не так.
BrynJ 13.10.2009 11:11:08
один вопрос: вы абсолютно позиционируете элементы, или ваш виджет AddIncSearch выполняет позиционирование?
Jonathan Fingland 13.10.2009 11:41:45
Плагин AddIncSearch выполняет позиционирование (я могу добавить фрагмент кода к моему вопросу, если вы считаете, что это поможет).
BrynJ 13.10.2009 12:02:55
событие tabsshow может срабатывать непосредственно перед отображением вкладок. Попробуйте поместить свой код изменения позиции в setTimeout (func, 0), чтобы вывести его из потока
Jonathan Fingland 13.10.2009 13:42:26

Вы пробовали определенные свойства IE8:

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

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

1
30.12.2009 20:19:36

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

0
28.01.2010 03:23:53

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

<!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

1
23.12.2011 17:02:32