Ненужные отступы в списках

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

1. Броузер рендерит не тот код который вы пишете, а тот, который получится в результате валидации вашего.
2. В каком-то доисторическом стандарте (html 3.2 кажется) было сказано, что тег LI закрывать не обязательно.

IE чтоб ему было удобнее рендерить приводит и закрытые и не закрытые теги LI к одному варианту, конечно же к не закрытому. (А что вы от него ждёте?) После закрывающего тега LI идёт перевод строки, он идентичен пробелу. Этот пробел и добавляется к тексту внутри LI. В нормальных броузерах этот пробел становится между тегами.

Проверить можно тут.



А выглядит это вот так:


Как избавиться от этой неоднозначности?
Ответов неколько:

1. писать так
<ul><!--
--><li>Qwe</li><!--
--><li>Asd</li><!--
--><li>Zxc</li><!--
--></ul>


2. так
<ul>
<li>Qwe</li><li>Asd</li><li>Zxc</li></ul>

3. или так

<ul><li
>Qwe</li><li
>Asd</li><li
>Zxc</li></ul>


UPD:
Тут написано не о том как исправить очередной баг IE, а о том как сделать так, чтобы все броузеры отрендерили список одинаково.
Мозилла тоже вставила пробел только не внутрь LI а между ними.