Оказывается, однажды на работе я столкнулся с каким-то аномальным поведением в списке UL.
Кроме того, вчера я увидел сообщение http://bbs.blueidea.com/thread-2984871-1-1.html , поэтому протестировал различные атрибуты стиля списка и обнаружил интересный феномен.
Давайте сначала посмотрим на объяснение стиля списка в руководстве по CSS.
Определение и использование
Сокращенный атрибут списка в стиле списка устанавливает все свойства списка в одном объявлении.
иллюстрировать
Это свойство является сокращенным свойством, которое охватывает все остальные свойства стиля списка. Поскольку он применяется ко всем элементам с отображением элемента списка, его можно использовать только к элементам li в обычном HTML и XHTML, но на самом деле он может применяться к любому элементу и наследуется элементом списка.
Следующие свойства могут быть установлены по порядку:
• тип списка в стиле
• позиция в стиле списка
• изображение в стиле списка
Необязательно задавать одно из значений. Например, также допускается «list-style:circle Inside;». Свойства, которые не заданы, используют значения по умолчанию.
Значение по умолчанию: диск снаружи нет
В повседневной работе часто необходимо выполнить сброс CSS для ul и li, чтобы скрыть символы списка.
Наиболее часто используемый способ написания — Ul,li,ol{стиль-списка:none;} (некоторые люди также используют ul,li,ol{тип-стиля списка:none;})
Окно запуска кода
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
С этой страницей проблем нет в IE6, 7, 8 и FF.
Но что мы не можем игнорировать, так это то, что list-style: содержит три атрибута:
тип стиля списка
позиция в стиле списка
список-стиль-img
Если вы не обратите внимания на эти три атрибута, стиль списка иногда может вызвать проблемы.
Например, когда ul после плавающего типа требуется display:inline для решения проблемы двойного поля в IE6, происходит что-то странное:
Окно запуска кода
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
.ul01{float:left;display:inline;}
.ul01,.ul01 li{стиль списка: нет;}
Вышеупомянутая страница по-прежнему является нормальной в IE8 и ff, но в IE6 и 7 между внутренней частью ul и li существует расстояние.
Видно, что когда мы определяем list-style:none, хотя символ списка не появляется, его позиция все еще остается в IE6 и 7.
Посмотрите, какие атрибуты имеет этот UL в FF.
Как видно на рисунке, когда list-style:none определен в css, он не влияет на позицию списка-стиля. Это все еще настройка по умолчанию для браузера FF, и значение находится снаружи.
В IE6 и 7 list-style-position: Inside, скорее всего, будет значением по умолчанию.
Чтобы подтвердить это, я изменил list-style:none на list-style:none внутри none и снова протестировал его.
Окно запуска кода
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
После его запуска вы можете обнаружить, что в IE6 и 7 он ведет себя точно так же, как и list-style:none.
Поэтому я предполагаю, что в IE6 и 7, когда UL имеет атрибуты float:left и display:inline и list-style:none установлен, list-style-position также по умолчанию имеет значение внутри;
Итак, я пришел к выводу, что в IE6 и 7, когда UL не имеет float:left;display:inline;:
Независимо от наличия атрибута list-style:none символы списка скрыты и не занимают места (5, 6 в коде ниже)
Когда UL имеет атрибут float:left;display:inline;
list-style:none, символ списка скрыт, но позиция все еще остается (list-style-position:inside (UL1, ul3 в коде ниже)
list-style:none не установлен; символ списка скрыт и не занимает позиции (list-style-position:outside) (код UL4)
UL02 относительно хорошо показал себя во всех браузерах, участвовавших в тесте.
Этот последний фрагмент кода сравнивает производительность list-style при различных обстоятельствах, особенно производительность 4, 5 и 6 в IE6 и 7.
Окно запуска кода
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
Сравнивая результаты производительности приведенного выше кода, я думаю:
В Firefox, пока list-style-type равен none, независимо от того, находится ли значение list-stype-position снаружи или внутри, list-style может быть хорошо скрыт. В IE6 и 7 устанавливается только list-style:none. . недостаточно для решения всех проблем, поэтому я думаю, что лучше использовать list-style:none out none при сбросе CSS.