Стиль списка: нет при сбросе CSS

Автор：Eve Cole Время обновления：2010-05-22 15:52:43

Оказывается, однажды на работе я столкнулся с каким-то аномальным поведением в списке 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;})

С этой страницей проблем нет в IE6, 7, 8 и FF.

Но что мы не можем игнорировать, так это то, что list-style: содержит три атрибута:

тип стиля списка
позиция в стиле списка
список-стиль-img

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

Например, когда ul после плавающего типа требуется display:inline для решения проблемы двойного поля в IE6, происходит что-то странное:

.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 и снова протестировал его.

После его запуска вы можете обнаружить, что в 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.

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>list-style: none или list-style:none вне none;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px; маржа:4px 0 0 15px;фон:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{стиль списка: нет снаружи нет;} .ul03,.ul03 li{стиль списка: нет внутри нет;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{список- стиль: нет;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; list-style:none; </p> <ul class="ul01"> <li><a href="#">Чистые слова, странные сны и стремительные мысли</a></li> <li><a href="#" > Как и любовь, это требование почти идеально.</a></li> <li><a href="#">Слабые юные и невинные мальчики и девочки в кампусе</a></li> <li> < a href="#">Я колеблюсь и колеблюсь, и давно потерял чувство дистанции</a></li> <li><a href="#">Смотрю на ее лицо и декламирую знакомое и незнакомое слова Стихи</a></li> <li><a href="#">Эти слова прекрасно описывают дух девушки</a></li> <li><a href="#"> Чересстрочный светлые и темные подсказки и неопределенные главные герои.</a></li> <li><a href="#">Нежные и искренние чувства постепенно проявляются и становятся захватывающими.</a></li> <li ><a href ="#">В тексте постоянно бродят эмоции высокой плотности</a></li> </ul> </div> <div> <p>2:float:left;display:inline-style: ни одного вне ни одного;</p> <ul class="ul02"> <li><a href="#">Чистые слова, странные сны и стремительные мысли</a></li> <li ><a href= "#">Как и любовь, это требование почти идеально.</a></li> <li><a href="#">Слабые юные и невинные мальчики и девочки в кампусе</a >/li> <li><a href="#">Я так нерешителен, что больше не чувствую расстояния</a></li> <li><a href="#">Глядя на нее Лицо читало знакомое, но незнакомое стихи</a></li> <li><a href="#">Эти слова прекрасно описывают дух девушки</a></li> <li> <a href="#">Переплетенный свет и темные подсказки, и неопределенные главные герои.</a></li> <li><a href="#">Тонкие и искренние чувства постепенно становятся всепоглощающими.</a> a></li> <li><a href= "#">В тексте постоянно бродят эмоции с высокой плотностью эмоций</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none внутри нет;</p> <ul class="ul03"> <li><a href="#">Чистые слова, странные сны, стремительные мысли</p> a></li> <li><a href ="#">Как и любовь, это требование почти идеально.</a></li> <li><a href="#">Свет в кампусе Юные и невинные мальчики и девочки</a></li> <li><a href="#">Я нерешителен и нерешителен, и я давно потерял чувство дистанции</a></li> <li><a href="#">Глядя на ее лицо и чтение знакомых, но незнакомых стихов.</a></li> <li><a href="#">Эти слова прекрасно описывают душу девушки</a >/li> <li><a href="#"> Переплетение светлых и темных подсказок и неопределенных главных героев.</a></li> <li><a href="#">Нежные и искренние чувства постепенно становятся яркими и захватывающими</a></li> <li><a href ="#">Высокая плотность эмоций постоянно бродит в тексте</a></li> </ul> </div> <div> <p>4:float:left;display:inline;без сброса CSS< /p> <ul class="ul04"> <li><a href="#">Чистый текст, странные мечтательные скачущие мысли</a></li> <li><a href="#">Так же, как любовь, требования почти идеальны.</a></li> <li><a href="#"> Слабые молодые и невинные мальчики и девочки в кампусе</a></li> <li><a href ="#">Я колеблюсь и колеблюсь, и больше не чувствую чувства дистанции</a></li> <li> <a href="#">Глядя на ее лицо и декламируя знакомые, но незнакомые стихи< /a></li> <li><a href="#">Эти слова прекрасно описывают дух девушки</a></li> <li><a href="#">Переплетение светлых и темных подсказок и неопределенные главные герои</a></li> <li><a href="#">Нежные и деликатные Искренние чувства постепенно проявляются и становятся всепоглощающими</a></li> <li><a href="#" >Высокая плотность эмоций постоянно бродит в тексте</a></li> </ul> </div> <div> <p>5: Нет отображения, стиль списка атрибутов с плавающей запятой отсутствует;</p> < ul class="ul05"> <li><a href="#">Чистый текст — это странно Мечтательные и стремительные мысли</a></li> <li><a href="#">Как и любовь, требование почти идеальное</a></li> <li><a href=" #">Слабые молодые и невинные мальчики и девочки в кампусе</a></li> <li><a href=" #">Я колеблюсь и колеблюсь, и давно потерял чувство дистанции</a></li> <li><a href="#">Смотрю на ее лицо и декламирую знакомые, но незнакомые стихи</a >/li> <li><a href="#">Эти слова точно описывают душу девушки</a></li> <li><a href="#">Переплетение светлых и темных подсказок и неопределенных главных героев </a></li> <li><a href="#" >Нежные и искренние чувства постепенно возникают и становятся захватывающими.</a></li> <li><a href="#">Высокая плотность эмоции постоянно бродят в тексте</a></li> </ul> </div> <div> <p>6: Нет отображения, нет атрибутов float list-style:none;</p> <ul class= "ul06"> <li><a href="#"> Чистые слова, странные сны и стремительные мысли</a></li> <li><a href="#">Как и в любви, требование почти идеально</a></li> <li>< a href="#">Слабые молодые и невинные мальчики и девочки в кампусе</a></li> <li><a href="#">Я я колеблюсь и колеблюсь, и я давно потерял чувство дистанции</a> </li> <li><a href="#">Глядя на ее лицо и декламируя знакомые, но незнакомые стихи</a></li > <li><a href="#">Эти слова как раз подходят. Они идеально описывают душу девушки.</a></li> <li><a href="#">Переплетение светлых и темных подсказок и неопределенных главных героев. </a></li> <li><a href ="#">Нежные и искренние чувства постепенно возникают и становятся захватывающими.</a></li> <li><a href="#">Высокая плотность эмоции неоднократно бродят в тексте</a>< /li> </ul> </div> </body> </html>
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

Сравнивая результаты производительности приведенного выше кода, я думаю:
В Firefox, пока list-style-type равен none, независимо от того, находится ли значение list-stype-position снаружи или внутри, list-style может быть хорошо скрыт. В IE6 и 7 устанавливается только list-style:none. . недостаточно для решения всех проблем, поэтому я думаю, что лучше использовать list-style:none out none при сбросе CSS.