В блоге команды Internet Explorer1 недавно опубликован список основных проблем совместимости существующих сайтов с IE8.
Разница между IE8 в режиме совместимости и IE7
Кросс-документные связи
Отключены хаки, которые использовались для кросс-доменных и кросс-документных связей.
РЕШЕНИЕ: Используйте Cross Document Messaging (XDM)2.
Расширение объекта события
В IE8 у объекта события есть свойства, связанные с новыми возможностями, например, source для Cross Document Messaging (XDM)2, некоторые из них доступны и в режиме совместимости, это может привести к конфликту с пользовательскими свойствами объекта события.
event.source = myObject; // Только для чтения IE8
РЕШЕНИЕ: Измените имя конфликтующего свойства.
event.mySource = myObject;
Порядок атрибутов
Порядок атрибутов в коллекции атрибутов и свойствах innerHTML и outerHTML изменен.
attr = elm.attributes[1]; // может отличаться в IE8
РЕШЕНИЕ: Ссылайтесь на атрибуты по имени.
attr = elm.attributes["id"];
Присваивание не поддерживаемых значений CSS свойств
Присваивание значений не поддерживающихся в IE7, но поддерживающихся в стандартном режиме IE8 не приводит к исключению в режиме совместимости. Некоторые сайты используют эти исключения, чтобы определить поддерживается ли соответствующее значение CSS свойства или нет.
try {
elm.style.display = "table-cell";
} catch(e) {
// выполняется в IE7, но не в IE8,
// независимо от режима
}
РЕШЕНИЕ: У этой проблемы нет простого решения (за исключением определения версии браузера). Лучшее что можно сделать это обновить страницу для работы в стандартном режиме IE8.
Разница между стандартным режимом и режимом совместимости IE8
Большинство проблем связано с отсутствием старых ошибок в стандартном режиме IE8. Обновление сайта для работы в стандартном режиме IE8 лучшее решение в долгосрочной перспективе, но если нужно быстрое решение проблем то можно использовать режим совместимости4.
В стандартном режиме кроме вышеупомянутых проблем, можно столкнуться со следующими:
Определение версии браузера
Неверное определение версии браузера часто приводит некорректной работе страницы. Особенно это касается условных комментариев, на многих страницах они используются для исправления ошибок, которых больше нет в IE8.
<!--[if IE]>
<link rel="stylesheet" type="text/css" src="ie.css" />
<![endif]-->
РЕШЕНИЕ: Обновите части кода зависящие от версии браузера. По возможности, используйте проверку наличия объектов.
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" src="ie.css" />
<![endif]-->
Проверка наличия объектов
Проверка наличия объектов отлично работает, если пользоваться ей корректно, но некоторые страницы предполагают наличие одних объектов исходя из наличия других, что приводит к ошибкам, т.к. объекты могут поддерживаться независимо.
if(window.postMessage) {
window.addEventListener("load", myHandler, false);
}
РЕШЕНИЕ: Проверяйте наличие непосредственно используемого объекта.
if(window.addEventListener) {
window.addEventListener("load", myHandler, false);
}
Ошибки в HTML
Коррекция ошибок в стандартном режиме IE8 отличается от коррекции ошибок в IE7.
<ul>
<li>1.1
<ul>
<li>1.1.1</li>
</li>
<!-- Закрывает 1.1 в IE8, но не в IE7 -->
<li>1.1.2</li>
</ul>
</li>
</ul>
РЕШЕНИЕ: Разметка не должна содержать ошибок.
<ul>
<li>1.1
<ul>
<li>1.1.1</li>
<!-- </li> -->
<li>1.1.2</li>
</ul>
</li>
</ul>
Работа с классом элемента
В IE7, для работы с классом элемента использовалось имя атрибута className
. В стандартном режиме IE8 это исправлено. Использование старого имени создаст атрибут className
и никак не повлияет на класс элемента.
return elm.getAttribute("className");
РЕШЕНИЕ: Используйте стандартное имя class
.
return elm.getAttribute("class");
GetElementById5
Метод getElementById
теперь чувствителен к регистру и не ищет по атрибуту name
.
<div id="Test"></div>
<script type="text/javascript">
// Из за разницы в регистре элемент не найден
var test = document.getElementById("test")
</script>
РЕШЕНИЕ: Следите за регистром и используйте getElementsByName
для поиска по атрибуту name
.
<div id="Test"></div>
<script type="text/javascript">
// Элемент Test найден
var test = document.getElementById("Test")
</script>
Generic CSS Prefix Selectors
Не поддерживаются в стандартном режиме IE8. В первую очередь это коснется страниц использующих VML. Использование такого селектора в скрипте приведет к ошибке, а в CSS к неверному отображению страницы.
v:* {
behavior: url(#default#VML);
}
РЕШЕНИЕ: Перечислите все нужные теги.
v:polyline, v:line {
behavior: url(#default#VML);
}
CSS Expressions6
IE8 не поддерживает CSS Expressions в стандартном режиме7.
/* CSS */
#main {
background-color:
expression((new Date()).getHours()%2 ? "#000" : "#fff");
}
РЕШЕНИЕ: Используйте улучшенную поддержку CSS или JavaScript.
/* Script */
var elm = document.getElementById("main");
if((new Date()).getHours()%2) {
elm.style.backgroundColor = "#000";
} else {
elm.style.backgroundColor = "#fff";
}
Нативный JSON8
IE8 нативно поддерживает JSON, совместимый с ES3.1 Proposal Working Draft9...
Некоторые страницы определяют наличине нативного JSON,
и используют его нестандартным образом.
if(!window.JSON) {
JSON = myJSON;
}
JSON.encode(obj); // Не соответствует стандарту
РЕШЕНИЕ: Модифицируйте код, чтобы он соответствовал стандартам, или не используйте нативный JSON.
JSON = myJSON;
JSON.encode(obj);
Начальные значения CSS свойств
Не установленные свойства объекта currentStyle теперь возвращают их значения по умолчанию.
Это основная причина проблем с контролом меню в ASP.NET.10
var zIndex = elm.currentStyle.zIndex;
if(zIndex == 0) {
// код
}
РЕШЕНИЕ: Проверяйте и старое, и новое (соответветствующее стандартам) значение по умолчанию.
var zIndex = elm.currentStyle.zIndex;
if(zIndex == 0 || zIndex == "auto") {
// код
}
Не установленные значения CSS свойств
Не установленные свойства объекта style теперь возврящают пустую строку (в соответствии со стандартом).
var zIndex = elm.style.zIndex;
if(zIndex === 0) {
// код
}
РЕШЕНИЕ: Проверяйте и старое значение, и пустую строку.
var zIndex = elm.style.zIndex;
if(zIndex === 0 || zIndex === "") {
// код
}
Коллекция атрибутов
Коллекция атрибутов теперь содержит только те атрибуты которые явно установлены, а не все атрибуты распознаваемые IE.
var attr = elm.attributes["checked"];
// Потенциальная ошибка в IE8
return attr.specified;
РЕШЕНИЕ: Проверяйте наличие атрибута в коллекции.
var attr = elm.attributes["checked"];
if(attr) {
return attr.specified;
} else {
return false;
}
Ссылки
- http://blogs.msdn.com/ie/default.aspx
- http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
- http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
- http://msdn.microsoft.com/en-us/library/ms536437.aspx
- http://msdn.microsoft.com/en-us/library/ms537634.aspx
- http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx
- http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx
- http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft
- http://blogs.msdn.com/giorgio/archive/2009/02/01/asp-net-menu-and-ie8-rendering-white-issue.aspx