Отступы в списке

Vlad · February 14, 2011

Есть следующий список. В IE7 между пунктами наблюдается небольшой промежуток, в остальных браузерах его нет. Как убрать знаю, но не могу понять, откуда он берется. Что скажете?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Меню</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   LI {
	list-style: none; /* Убираем маркеры */
	border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
	width: 200px; /* Ширина меню */
   }
   A {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	color: #666; /* Цвет текста */ 
   }
  </style>
 </head>
 <body>
	<ul>
	 <li><a href="linkcl.html">Cyп-харчо</a></li>
	 <li><a href="linkc2.html">Лилибдж</a></li>
	 <li><a href="linkc3.html">Чихиртма</a></li>
	 <li><a href="linkc4.html">Шашлык</a></li>
	</ul>
 </body>
</html>

Great Rash · February 14, 2011

Вообще не знал про inline-block... И странно то, что значение потом перезаписывается, а hasLayout не выключается.

UPD: и все-таки хотелось бы узнать причину...

deadrash · February 14, 2011

Есть следующий список. В IE7 между пунктами наблюдается небольшой промежуток, в остальных браузерах его нет. Как убрать знаю, но не могу понять, откуда он берется. Что скажете?

Ээээ... это точно не шутка или какой-то странный розыгрыш для новичков?

Капитан-Очевидность заявляет! li — это строчный элемент, и как любой другой строчный элемент он офорпляется по тем же правилам по которым оформляется и обычный текст, по сути любой строчный элемент это как одна буква или один символ. По сути <li>a</li><li>a</li><li>a</li> это тот же aaa только с некоторыми предустановленными стилями для li который браузер добавляет по умолчанию.

И как мы все знаем, любой символ табуляции, переноса строки, или пробел в любом количестве присутствующие в тексте — переводятся браузером в один символ пробела. То-есть если мы запишем <li>a</li>[табуляция]<li>a</li>[перенос строки]<li>a</li>[пять пробелов]<li>a</li> то браузер нам отрисует "a a a a" то есть все эти символы между элементами li он заменит на пробел.

Так что IE как бы его не ругали как раз правильно отображает такую разметку, другое дело почему другие браузеры плюют на табуляцию между элементами li? Я думаю по соображениям красивого кода =) иногда ведь приходится писать очень длинные списки...

Edited February 14, 2011 by deadrash

Vlad · February 14, 2011

С каких это пор <li> стал строчным элементом?

deadrash · February 14, 2011

С каких это пор <li> стал строчным элементом?

Ат блин, память подвела, и правда блочный элемент

Scrum · February 14, 2011

И как мы все знаем, любой символ табуляции, переноса строки, или пробел в любом количестве присутствующие в тексте — переводятся браузером в один символ пробела.

Во я же говорил что связано с переносом строки. т.к. вне элементов ли перенос строки получается строчным.

SelenIT · February 14, 2011

вне элементов ли перенос строки получается строчным.

Проблема, возможно, еще и в том, что в IE7- (и только там) перенос строки получается не вне элементов li, а внутри (старые IE тупо игнорируют закрывающие теги для элементов списков). Видимо, получается блок внутри строки, который IE, как обычно в подобных ситуациях, неявно преобразует в инлайновый блок (аналогично ситуации с картинкой в блоке с пробелами).

Хорошая статья по этой проблеме (и ее разновидностям) есть на cssing.org.ua.

Vlad · February 15, 2011

SelenIT, похоже именно эта проблема и возникла.

Scrum · February 15, 2011

Проблема, возможно, еще и в том, что в IE7- (и только там) перенос строки получается не вне элементов li, а внутри (старые IE тупо игнорируют закрывающие теги для элементов списков). Видимо, получается блок внутри строки, который IE, как обычно в подобных ситуациях, неявно преобразует в инлайновый блок (аналогично ситуации с картинкой в блоке с пробелами).
Хорошая статья по этой проблеме (и ее разновидностям) есть на cssing.org.ua.

Спасибо за подборочку.

Sign In

Отступы в списке

Question

Vlad

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information