display

Internet Explorer

Google Chrome

Opera

Safari

Firefox

6.07.08.0 2.03.04.0 9.29.610 2.03.14.0 2.03.03.6
                   
CSS 1CSS 2CSS 2.1CSS 3
    

Описание CSS свойства:

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Краткая информация:
Значение по умолчанию: inline
Наследуется: Нет
Применяется:Ко всем элементам
Ссылка на спецификацию: http://www.w3.org/TR/CSS21/visuren.html#display-prop

Синтаксис CSS свойства:

display: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

Значения CSS свойства:

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение Описание IE6 IE7 IE8 Cr2 Cr3 Op9.2 Op10 Sa3.1 Sa4 Ff2 Ff3
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. Да Да Да Да Да Да Да Да Да Да Да
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. Да Да Да Да Да Да Да Да Да Да Да
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. Да Да Да Да Да Да Да Да Да Нет Да
inline-table Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. Нет Нет Да Да Да Да Да Да Да Нет Да
list-item Элемент выводится как блочный и добавляется маркер списка. Да Да Да Да Да Да Да Да Да Да Да
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. Да Да Да Да Да Да Да Да Да Да Да
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста. Нет Нет Да Ошибки Да Да Да Ошибки Ошибки Нет Нет
table Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>. Нет Нет Да Да Да Да Да Да Да Да Да
table-caption Задает заголовок таблицы подобно применению тега <CAPTION>. Нет Нет Да Да Да Да Да Да Да Да Да
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>). Нет Нет Да Да Да Да Да Частично Да Да Да
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <COL>. Нет Нет Да Да Да Частично Да Да Да Частично Да
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>. Нет Нет Да Да Да Частично Да Да Да Частично Да
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>. Нет Нет Да Да Да Да Да Да Да Да Да
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>. Нет Нет Да Да Да Да Да Да Да Да Да
table-row Элемент отображается как строка таблицы (тег <TR>). Нет Нет Да Да Да Да Да Да Да Да Да
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>. Нет Нет Да Да Да Да Да Да Да Да Да

Объектная модель CSS свойства:

[window.]document.getElementById("elementID").style.display

Особенности отображения в браузерах:

Internet Explorer до версии 7 включительно:

  • поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>;
  • для элементов <LI> понимает значение block как list-item;
  • значение inline-block применяется только для встроенных элементов.

Opera 9.2, а также Firefox 2.0:

  • значение table-column применяется только для тега <COL>;
  • значение table-column-group поддерживается только для тега <COLGROUP>.

Chrome 2.0, а также Safari версии 3 и старше:

  • значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Баннер SGU.RU