У меня есть сайт, который активно использует jQuery и CSS для достижения довольно приятных эффектов. Страницы работают безупречно в FF и Chrome - однако в IE9 (и, возможно, в других версиях IE) мои страницы выглядят неправильно отформатированными из-за того, что браузер игнорирует мои position:fixed; свойства. Я предполагаю, что мой вопрос: что могло вызвать это (в значительной степени глобально через мой сайт), чтобы случиться? Я знаю, что трудно сказать без полного примера кода, но мне было интересно, видел ли кто-нибудь это раньше. Существует много CSS, поэтому я не совсем уверен, что имеет отношение к публикации, а что нет. Если вам нужно больше кода, пожалуйста, дайте мне знать.
Пример 1. Панель инструментов, имитирующая меню кнопки «Пуск» окна
В приведенном ниже примере вы увидите, что я реализовал панель инструментов, которая имитирует поведение кнопки «Пуск» в Windows. Он расположен в левом нижнем углу и при щелчке расширяется для отображения содержимого. Эта функциональность прекрасно работает в Ch / FF, но, как вы можете видеть в IE9, панель инструментов и ее содержимое добавляются в конец страницы. Я быстро набрал JSFiddle , используя этот метод в IE9, и, похоже, он работает хорошо. Я не уверен, что может отличаться в моем документе, из-за которого он перестает работать.
Нечетное : если я изменю CSS на position:absolute;, div будет размещен правильно и функция на 99% будет корректно - он просто не будет прокручиваться вместе со страницей.
#floatingOptions{
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
bottom:0px;
display:none; /*this gets shown via javascript */
left:0px;
overflow:hidden;
position:fixed;
width:250px;
z-index:99999;
}
Пример 2. Модальные окна с помощью jQuery Tools Overlay
Многие из моих модальных окон генерируются с использованием jQuery Tools Overlay . Опять же, это прекрасно работает в Ch / FF, но IE9 снова добавляет модальный div в конец страницы (не говоря уже о кажущемся игнорировании z-индекса).
UPDATE
вот мои утверждения doctype / html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
РЕШЕНИЕ
Я понял это. Это была ошибка POBKAC (возникла проблема между клавиатурой и стулом).
мой <!DOCTYPE....> вызывается в header.php, и я был глуп и делал это на некоторых страницах ..
<style type="text/css">
@import url(/themes/pn5/jquery.ui.all.css);
@import url(/qtip/jquery.qtip.css);
</style>
<?php include ('header.php'); ?>
поэтому стили помещались в код до объявления <!DOCTYPE>. переключил его, и проблема исчезла.
Спасибо всем!