Совместимость сайтов с IE8

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

 

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

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

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

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

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

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

<code><span class="kwd">event</span><span class="pun">.</span><span class="pln">source </span><span class="pun">=</span><span class="pln"> myObject</span><span class="pun">;</span><span class="pln">  </span><span class="com">// Только для чтения IE8</span></code>

РЕШЕНИЕ: Измените имя конфликтующего свойства.

<code><span class="kwd">event</span><span class="pun">.</span><span class="pln">mySource </span><span class="pun">=</span><span class="pln"> myObject</span><span class="pun">;</span></code>

Порядок атрибутов

Порядок атрибутов в коллекции атрибутов и свойствах innerHTML и outerHTML изменен.

<code><span class="pln">attr </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">attributes</span><span class="pun">[</span><span class="lit">1</span><span class="pun">];</span><span class="pln">  </span><span class="com">// может отличаться в IE8</span></code>

РЕШЕНИЕ: Ссылайтесь на атрибуты по имени.

<code><span class="pln">attr </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">attributes</span><span class="pun">[</span><span class="str">"id"</span><span class="pun">];</span></code>

Присваивание не поддерживаемых значений CSS свойств

Присваивание значений не поддерживающихся в IE7, но поддерживающихся в стандартном режиме IE8 не приводит к исключению в режиме совместимости. Некоторые сайты используют эти исключения, чтобы определить поддерживается ли соответствующее значение CSS свойства или нет.

<code><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    elm</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">"table-cell"</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd">catch</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// выполняется в IE7, но не в IE8,</span><span class="pln">
    </span><span class="com">// независимо от режима</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span></code>

РЕШЕНИЕ: У этой проблемы нет простого решения (за исключением определения версии браузера). Лучшее что можно сделать это обновить страницу для работы в стандартном режиме IE8.

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

Большинство проблем связано с отсутствием старых ошибок в стандартном режиме IE8. Обновление сайта для работы в стандартном режиме IE8 лучшее решение в долгосрочной перспективе, но если нужно быстрое решение проблем то можно использовать решим совместимости3.

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

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

Неверное определение версии браузера часто приводит некорректной работе страницы. Особенно это касается условных комментариев, на многих страницах они используются для исправления ошибок, которых больше нет в IE8.

<code><span class="com">&lt;!--[if IE]&gt;
    &lt;link rel="stylesheet" type="text/css" src="ie.css" /&gt;
&lt;![endif]--&gt;</span></code>

РЕШЕНИЕ: Обновите части кода зависящие от версии браузера. По возможности, используйте проверку наличия объектов.

<code><span class="com">&lt;!--[if lte IE 7]&gt;
    &lt;link rel="stylesheet" type="text/css" src="ie.css" /&gt;
&lt;![endif]--&gt;</span><span class="pln"> </span></code>

Проверка наличия объектов

Проверка наличия объектов отлично работает, если пользоваться ей корректно, но некоторые страницы предполагают наличие одних объектов исходя из наличия других, что приводит к ошибкам, т.к. объекты могут поддерживаться независимо.

<code><span class="kwd">if</span><span class="pun">(</span><span class="pln">window</span><span class="pun">.</span><span class="pln">postMessage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    window</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> myHandler</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code>

РЕШЕНИЕ: Проверяйте наличие непосредственно используемого объекта.

<code><span class="kwd">if</span><span class="pun">(</span><span class="pln">window</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    window</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> myHandler</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code>

Ошибки в HTML

Коррекция ошибок в стандартном режиме IE8 отличается от коррекции ошибок в IE7.

<code><span class="pun">&lt;</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1
        </span><span class="pun">&lt;</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
            </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1.1</span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- Закрывает 1.1 в IE8, но не в IE7 --&gt;</span><span class="pln">
            </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1.2</span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">&lt;/</span><span class="tag">ul</span><span class="pun">&gt;</span></code>

РЕШЕНИЕ: Разметка не должна содержать ошибок.

<code><span class="pun">&lt;</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1
        </span><span class="pun">&lt;</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
            </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1.1</span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- &lt;/li&gt; --&gt;</span><span class="pln">
            </span><span class="pun">&lt;</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">1.1.2</span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="tag">ul</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="pun">&lt;/</span><span class="tag">li</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">&lt;/</span><span class="tag">ul</span><span class="pun">&gt;</span></code>

Работа с классом элемента

В IE7, для работы с классом элемента использовалось имя атрибута className. В стандартном режиме IE8 это исправлено. Использование старого имени создаст атрибут className и никак не повлияет на класс элемента.

<code><span class="kwd">return</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">getAttribute</span><span class="pun">(</span><span class="str">"className"</span><span class="pun">);</span></code>

РЕШЕНИЕ: Используйте стандартное имя class.

<code><span class="kwd">return</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">getAttribute</span><span class="pun">(</span><span class="str">"class"</span><span class="pun">);</span></code>

GetElementById4

Метод getElementById теперь чувствителен к регистру и не ищет по атрибуту name.

<code><span class="pun">&lt;</span><span class="tag">div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"Test"</span><span class="pun">&gt;&lt;/</span><span class="tag">div</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">&lt;</span><span class="tag">script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="com">// Из за разницы в регистре элемент не найден </span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"test"</span><span class="pun">)</span><span class="pln">
</span><span class="pun">&lt;/</span><span class="tag">script</span><span class="pun">&gt;</span></code>

РЕШЕНИЕ: Следите за регистром и используйте getElementsByName для поиска по атрибуту name.

<code><span class="pun">&lt;</span><span class="tag">div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"Test"</span><span class="pun">&gt;&lt;/</span><span class="tag">div</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">&lt;</span><span class="tag">script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pun">&gt;</span><span class="pln">
    </span><span class="com">// Элемент Test найден</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"Test"</span><span class="pun">)</span><span class="pln">
</span><span class="pun">&lt;/</span><span class="tag">script</span><span class="pun">&gt;</span></code>

Generic CSS Prefix Selectors

Не поддерживаются в стандартном режиме IE8. В первую очередь это коснется страниц использующих VML. Использование такого селектора в скрипте приведет к ошибке, а в CSS к неверному отображению страницы.

<code><span class="pln">v</span><span class="pun">\:*</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    behavior</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="com">#default#VML);</span><span class="pln">
</span><span class="pun">}</span></code>

РЕШЕНИЕ: Перечислите все нужные теги.

<code><span class="pln">v</span><span class="pun">\:</span><span class="pln">polyline</span><span class="pun">,</span><span class="pln"> v</span><span class="pun">\:</span><span class="pln">line </span><span class="pun">{</span><span class="pln">
    behavior</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="com">#default#VML);</span><span class="pln">
</span><span class="pun">}</span></code>

CSS Expressions5

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

<code><span class="com">/* CSS */</span><span class="pln">
</span><span class="com">#main {</span><span class="pln">
    background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">
        expression</span><span class="pun">((</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">()).</span><span class="pln">getHours</span><span class="pun">()%</span><span class="lit">2</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="str">"#000"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"#fff"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span></code>

РЕШЕНИЕ: Используйте улучшенную поддержку CSS или JavaScript.

<code><span class="com">/* Script */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> elm </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"main"</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">((</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">()).</span><span class="pln">getHours</span><span class="pun">()%</span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    elm</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">backgroundColor </span><span class="pun">=</span><span class="pln"> </span><span class="str">"#000"</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    elm</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">backgroundColor </span><span class="pun">=</span><span class="pln"> </span><span class="str">"#fff"</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>

Нативный JSON7

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

<code><span class="kwd">if</span><span class="pun">(!</span><span class="pln">window</span><span class="pun">.</span><span class="pln">JSON</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    JSON </span><span class="pun">=</span><span class="pln"> myJSON</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
JSON</span><span class="pun">.</span><span class="pln">encode</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">);</span><span class="pln"> </span><span class="com">// Не соответствует стандарту</span></code>

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

<code><span class="pln">JSON </span><span class="pun">=</span><span class="pln"> myJSON</span><span class="pun">;</span><span class="pln">
JSON</span><span class="pun">.</span><span class="pln">encode</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">);</span></code>

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

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

<code><span class="kwd">var</span><span class="pln"> zIndex </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">currentStyle</span><span class="pun">.</span><span class="pln">zIndex</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">zIndex </span><span class="pun">==</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// код</span><span class="pln">
</span><span class="pun">}</span></code>

РЕШЕНИЕ: Проверяйте и старое, и новое (соответветствующее стандартам) значение по умолчанию.

<code><span class="kwd">var</span><span class="pln"> zIndex </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">currentStyle</span><span class="pun">.</span><span class="pln">zIndex</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">zIndex </span><span class="pun">==</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> zIndex </span><span class="pun">==</span><span class="pln"> </span><span class="str">"auto"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// код</span><span class="pln">
</span><span class="pun">}</span></code>

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

Не установленные свойства объекта style теперь возврящают пустую строку (в соответствии со стандартом).

<code><span class="kwd">var</span><span class="pln"> zIndex </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">zIndex</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">zIndex </span><span class="pun">===</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// код</span><span class="pln">
</span><span class="pun">}</span></code>

РЕШЕНИЕ: Проверяйте и старое значение, и пустую строку.

<code><span class="kwd">var</span><span class="pln"> zIndex </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">zIndex</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">zIndex </span><span class="pun">===</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> zIndex </span><span class="pun">===</span><span class="pln"> </span><span class="str">""</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// код</span><span class="pln">
</span><span class="pun">}</span></code>

Коллекция атрибутов

Коллекция атрибутов теперь содержит только те атрибуты которые явно установлены, а не все атрибуты распознаваемые IE.

<code><span class="kwd">var</span><span class="pln"> attr </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">attributes</span><span class="pun">[</span><span class="str">"checked"</span><span class="pun">];</span><span class="pln">
</span><span class="com">// Потенциальная ошибка в IE8</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> attr</span><span class="pun">.</span><span class="pln">specified</span><span class="pun">;</span><span class="pln"> </span></code>

РЕШЕНИЕ: Проверяйте наличие атрибута в коллекции.

<code><span class="kwd">var</span><span class="pln"> attr </span><span class="pun">=</span><span class="pln"> elm</span><span class="pun">.</span><span class="pln">attributes</span><span class="pun">[</span><span class="str">"checked"</span><span class="pun">];</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">attr</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> attr</span><span class="pun">.</span><span class="pln">specified</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>

Ссылки

  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

 

Спонсор поста — World Programs — Сделаем  в Тольятти

Запись навигация

Top