В блоге команды Internet Explorer¹ недавно опубликован список основных проблем совместимости существующих сайтов с IE8.

Разница между IE8 в режиме совместимости и IE7

Кросс-документные связи

Отключены хаки, которые использовались для кросс-доменных и кросс-документных связей.

РЕШЕНИЕ: Используйте Cross Document Messaging (XDM)².

Расширение объекта события

В IE8 у объекта события есть свойства, связанные с новыми возможностями, например, source для Cross Document Messaging (XDM)², некоторые из них доступны и в режиме совместимости, это может привести к конфликту с пользовательскими свойствами объекта события.

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 лучшее решение в долгосрочной перспективе, но если нужно быстрое решение проблем то можно использовать режим совместимости⁴.

В стандартном режиме кроме вышеупомянутых проблем, можно столкнуться со следующими:

Определение версии браузера

Неверное определение версии браузера часто приводит некорректной работе страницы. Особенно это касается условных комментариев, на многих страницах они используются для исправления ошибок, которых больше нет в 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");

GetElementById⁵

Метод 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 Expressions⁶

IE8 не поддерживает CSS Expressions в стандартном режиме⁷.

/* 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";
}

Нативный JSON⁸

IE8 нативно поддерживает JSON, совместимый с ES3.1 Proposal Working Draft⁹... Некоторые страницы определяют наличине нативного JSON, и используют его нестандартным образом.

if(!window.JSON) {
    JSON = myJSON;
}

JSON.encode(obj); // Не соответствует стандарту

РЕШЕНИЕ: Модифицируйте код, чтобы он соответствовал стандартам, или не используйте нативный JSON.

JSON = myJSON;
JSON.encode(obj);

Начальные значения CSS свойств

Не установленные свойства объекта currentStyle теперь возвращают их значения по умолчанию.
Это основная причина проблем с контролом меню в ASP.NET.¹⁰

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;
}

Ссылки

1. http://blogs.msdn.com/ie/default.aspx
2. http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
3. http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
4. http://msdn.microsoft.com/en-us/library/ms536437.aspx
5. http://msdn.microsoft.com/en-us/library/ms537634.aspx
6. http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx
7. http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx
8. http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft
9. http://blogs.msdn.com/giorgio/archive/2009/02/01/asp-net-menu-and-ie8-rendering-white-issue.aspx