Список тега UL, OL, DL: Проблемы совместимости для разных браузеров

Введение в статьи по производству веб -страниц: исследования и применение HTML CSS Sirem Elements UL, OL, DL.

Элементы списка HTML (такие как OL, UL, DL) широко используются в текущей разработке и производстве веб -сайта, но их характер различные в разных браузерах. В этой статье анализируются основные характеристики этих элементов списка, различные проблемы совместимости в разных браузерах и вводят некоторые общие приложения.

Это должно быть полезно для начинающих или тем, кто имеет некоторый опыт работы в CSS.

Неупорядоченные списки являются наиболее часто используемыми списками. На следующем рисунке показано отображение неупорядоченных списков в разных браузерах:

демо -страница

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

Некоторые специфические свойства CSS неупорядоченных списков-это тип списков, позиция в стиле списка и изображение в стиле списка. Эти свойства устанавливают тип списков пуль, местоположение тега и использование изображений вместо тегов. Эти три свойства могут быть объединены с списком в стиле списка.

Атрибут типа в стиле списка может быть установлен на некоторые различные значения. На следующей диаграмме показан эффект страницы некоторых значений:

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

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

Атрибут в стиле списка может дать неупорядоченные списки пользовательские уникальные производительность. К сожалению, использование этого метода для добавления номеров проектов в IE является много ошибок, поэтому он редко используется. Лучшим решением является добавление фонового изображения в элемент LI списка, соответственно настроить местоположение фонового изображения и установить на NO-Repeat. На maxdesign.com этот метод был продемонстрирован посредством пошаговых объяснений и хорошо работает во всех браузерах.

Заказанные списки используются, когда в каждом элементе списка требуется постепенное значение (например, 1, 2, 3 и т. Д.). Тип списка типа списка в стиле списка заказанного списка может быть установлен на любое значение, которое можно установить в неупорядоченном списке. В большинстве случаев упорядоченному списку либо предшествует постепенное значение, либо не предшествует каких -либо оценки. Не рекомендуется использовать упорядоченные списки для достижения поведения, аналогичного неупорядоченным спискам. Из -за этого семантика самого упорядоченного списка больше не верна.

Список определений используется для обозначения определенных элементов списка, которые включают заголовок определения (DT) и само определение (DD). Нет необходимости точно соответствовать при определении элемента списка, следующий код является полностью законным в строгом XHTML:

<dl> <dt> беспроводная музыка miguhui </dt> <dt> Copenhagen Conference </dt> <dd> "Октябрьская осада" </dd> </dl>

Таким образом, вы можете использовать несколько DTS под одним DD или несколькими DDS под одним DT.

Определите визуальный отображение списка. По умолчанию отображение каждого браузера почти так же, как показано на рисунке ниже:

демо -страница

HTML -код, соответствующий картине выше, выглядит следующим образом:

<dl> <dt>Title</dt> <dd>Here is the definition</dd> </dl> <dl> <dt>Popular movies</dt> <dd>October siege</dd> <dd>Taoling</dd> <dd>Three guns to slap the table</dd> <dd>Avatar</dd> </dl> <dl> <dt>Hot Тема </dt> <dd> фондовый рынок </dd> <dd> цены на жилье </dd> <dd> Новый год </dd> <dd> Цвета Cao Cao </dd> </dl> 4. Устаревший список: меню и режиссер

<Menu> и <Dir>, технически, также можно назвать списками HTML, но они устарели в XHTML, поэтому они не обсуждаются подробно здесь.

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

Элемент OL имеет небольшое изменение, и он получает два новых свойства: обратно, что является логическим значением, чтобы указать, поднимается ли список или падает; Start, который является целым для объявления отправной точки упорядоченного списка.

Кроме того, будут добавлены элементы <cright> и <petile>, и у них будут элементы дочерних элементов, включая элементы <dt> и <dd>.

Для получения дополнительной информации о HTML5, пожалуйста, обратитесь к этой статье о показателе HTML5 и CSS3 Taobao Kongyan [Baibiao Milk Tea]. Кроме того, вы также можете нажать здесь, чтобы просмотреть онлайн -PPT.

Ниже приведены некоторые общие и очевидные различия в браузерах.

Под Internet Explorer 8, Opera 9, Chrome, Firefox 2 и 3 и Safari, добавление дисплея: блок приведет к исчезновению номер элемента Li Elements в упорядоченном или неупорядоченном списке.

Но в рамках IE6 и IE7 добавление дисплея: Block Bullet все еще существует:

демо -страница

В соответствии с IE6 и IE7, добавление Float: оставленные, чтобы перечислить элементы (без других стилей), будут выровнены элементы списка горизонтально, пока исчезают пули (или номер предмета). Как показано на рисунке ниже, он вырезан из браузера IE7

В рамках IE8 и всех других браузеров элементы списка горизонтально выровнены, но пули (или номера проектов) все еще видны.

демо -страница

Когда элемент списка плавает, мы должны вспомнить еще один ключевой момент, то есть контейнер списка (элемент UL) умрет, когда внутри появляются только плавучие элементы. Это произойдет таким же образом во всех браузерах. Добавление переполнения: Скрытый является одним из решений этой проблемы.

Чтобы достичь приблизительно одинакового поплавка: левый эффект в разных браузерах, лучший способ - использовать дисплей: inline.

В соответствии с IE6 и IE7, если элемент списка в упорядоченном списке имеет макет, значение упорядоченного списка не увеличится и будет отображаться как 1, как показано на рисунке ниже:

демо -страница

Свойство Haslayout не может быть установлено напрямую, но если элемент установлен, чтобы иметь ширину, высоту, плавучие, абсолютное позиционирование, ожидание изменит Haslayout.

В большинстве браузеров, чтобы удалить пули или номера проектов и выравнивать левую сторону контента, вам необходимо установить левую прокладку на 0, но это не работает в IE6 и IE7. В IE6 и 7 вам нужно установить левый край на 0 и заменить его. Смотрите изображение ниже:

демо -страница

Чтобы избежать проблем при обработке стилей списков в разных браузерах, лучший способ - использовать CSS Reset, упомянутый выше. Сброс CSS может устанавливать практически все различия настройки по умолчанию в браузере и позволить всем браузерам работать на одной основе. Хотя в некоторых стилях все еще существуют различия, они не будут рассматриваться как сложная точка.

Кроме того, как упоминалось ранее, лучше всего избегать использования свойства в стиле списка вообще и вместо этого устанавливать фон, пользовательский символический обходной путь для кросс-браузера, легко в пользу неупопорядоченных списков.

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

• Неупорядоченные списки принадлежат к блокирующим элементам уровня и не нужно обернуть Div снаружи, чтобы применить фон или другие графические расширения.

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

• Хотя неупорядоченный список - это не просто простой список, добавляя такие элементы, как теги <a>, дополнительные элементы <li> сделают навигационную строку экспресс в более гибкой форме.

• Навигация разделена на списки и/или сублисты, что позволяет использовать вспомогательные технологии (например, считыватели экрана), которые пользователи могут легко пропустить всю панель навигации.

Например: меню Special Effect Lavalamp, реализованное с использованием jQuery

Например, пример выпадающего меню, которое я сделал некоторое время назад: JQuery использует Slidetoggle для реализации вертикального раскрывающегося меню

Эффект демонстрация

HTML List Tag UL, LI обеспечивает эффективный способ отображения списка фотографий по тем же причинам, что и упомянуто выше в панели навигации. Ниже приведены некоторые фотогалереи или компоненты фото отображения на основе тегов HTML.

jcarousel

Плагин jquery jquery jquery photo Переключающий Я перевел этот плагин на китайский, вы можете нажать здесь жестко: Jcarousel китайская демонстрация домашней страницы

Innerfade - jQuery

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

Он может легко реализовать автоматическое отображение случайного переключения новостей или контента объявлений, или воспроизводить отображение слайд -шоу с изображениями и т. Д. На следующем рисунке показана этап перехода на переключение слайдов перехода:

Эта демо-модуль сложно нажать здесь: Demo Innerfade Page

Многие блоги и учебные веб -сайты содержат код выделения JavaScript, который преобразует предварительные элементы или элементы Textarea в упорядоченные списки, как показано на следующем скриншоте. Одним из известных плагинов, выделяющих код, является синтаксис Алекса Горбатчева.

Ниже приведен скриншот эффекта, аналогичного выделенному плагину:

Вы можете нажать здесь, чтобы предварительно просмотреть эффект (демонстрационная страница показывает код подключаемого модуля cookie jQuery).

Комментарии блога, включая эти сайты, управляемые WordPress, встроены в упорядоченные списки, предлагают очень гибкие варианты стиля и закладывают основу для гнездования комментариев. Следующая картинка - скриншот из раздела комментариев истории Mr.gray - веб -дизайн взаимодействия Grey 8 Applications, опубликованную вчера Tencent CDC TD.

Наиболее типичным представителем является отображение тысяч категорий продуктов в колонке категории детской категории на домашней странице Taobao:

Как видно из скриншота, цель этой категории отображается с использованием списка определения DL, DT и DD.

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

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

• список

• Дизайн CSS: укрощение списков

• Списки CSS на W3Schools

• Списки определений - неправильно используются или неправильно поняли?

• Списки в стиле CSS: 20+ демонстраций, учебные пособия и лучшие практики

• Список элементов на HTML -ссылке SitePoint