IE свойство hasLayout.

Опубликовано: 21 февраля 2014      Автор:

Это свойство присуще элементам веб-страницы, которые обрабатываются и отображаются исключительно в браузере IE под управлением Windows. Отдельные элементы обладают свойством hasLayout сразу (значение true), иным же оно задается при необходимости. Его невозможно установить напрямую, указав в CSS коде.

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

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

К проблемным ситуациям, связанным со свойством hasLayout, можно отнести: некорректное поведение плавающих элементов; проблемы с отображением списков; сложность явного задания высоты контейнера, которая зависит от размера его контента; повышенные требования к системным ресурсам из-за необходимости дополнительных вычислений. Это одни из основных проблем, хотя этот список ими не ограничивается и его можно продолжить.

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

  • Таблицы, включая элементы, составляющие их структуру (<table>, <th>, <td>, <tr>).
  • Графические элементы (<img>).
  • Фреймы (<frame>, <iframe> и <farameset>).
  • Горизонтальные линии (<hr>).
  • Бегущая строка (<marquee>).
  • Основные элементы документа (<html> и <body>).
  • Элементы, предназначенные для внедрения объектов (<applet>, <embed> и <object>).

Ниже приводится список CSS свойств, установив которые можно косвенно задать значение true свойству hasLayout требуемого элемента. Это так называемые свойства-триггеры:

  • position (значение absolute);
  • display (inline-block);
  • float (left или right);
  • width и height (с любыми значениями, за исключением auto);
  • writing-mode (tb-rl);
  • zoom (со значением 1);

Помимо перечисленных, в седьмой версии IE есть несколько дополнительных свойств-триггеров, устанавливающих для hasLayout значение true:

  • position (со значением fixed);
  • overflow, overflow-x, overflow-y (принимающим значения hidden, scroll или auto);
  • min-width, max-width и min-height, max-height (с любым допустимым значением, кроме auto);

Для того, чтобы отменить свойство hasLayout нужно воспользоваться некоторыми из перечисленных свойств, которые допускают значения, сбрасывающие hasLayout в false. Вот список вариантов:

  • float (none);
  • width и height (значения auto);
  • position (со значением static);
  • overflow (visible);
  • writing-mode (с одним из значений: rl-tb, bt-rl или lr-tb);
  • zoom (normal);

Отдельно необходимо обратить внимание на использование свойства zoom для манипуляций значениями hasLayout. Дело в том, что zoom не является валидным свойством и для исключения непредсказуемого поведения других браузеров, необходимо заключать его в условные комментарии, позволяющие активировать его только в нужных ситуациях.

Так как явного способа определить значение свойства hasLayout не существует, то для того чтобы узнать обладает ли им требуемый элемент, можно воспользоваться одним из следующих методов.

  • Это можно установить, тщательно проанализировав код CSS, применяемый к элементу и в случае наличия соответствующих свойств-триггеров можно с уверенностью утверждать, что hasLayout установлено в true или false.
  • Второй способ подразумевает предварительную загрузку и установку плагина для IE (IE Developer Toolbar), который позволит определить обладает ли определенный элемент данным свойством.

Если в процессе работы над кодом веб-страницы вы никак не можете обойтись без назначения проблемному элементу свойства hasLayout, то имейте в виду, что использование соответствующих свойств-триггеров, помимо установки hasLayout приводит к изменению поведения элемента, свойственному прямому назначению свойства-триггера. К примеру, определив элементу свойство float: left вы устанавливаете его свойство hasLayout в true, но после этого объект будет смещен к левой границе контейнера и обтекаться контентом с противоположной стороны. Поэтому для достижения требуемого эффекта нужно подобрать наиболее подходящее для конкретной ситуации свойство-триггер.