Небольшой разрыв между элементами списка в неупорядоченном списке

Question

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

Моя проблема в том, что между элементами списка в Firefox, кажется, есть небольшой разрыв,в Google Chrome нет пропуска.

Если я изменю значение высоты строки css, оно исправит в Firefox, но затем сломает Google Chrome.

Любые идеи о том, что мне нужно сделать, какЯ думаю, что я делаю что-то не так, чтобы убедиться, что между каждым элементом списка нет пробелов в Firefox и Google Chrome?

Спасибо.

Answer 1

Я столкнулся с проблемой несколько минут назад и нашел простое решение, которое еще не было опубликовано здесь. Я попытался изменить поля и отступы, но это не сработало, поэтому я переместил все элементы LI слева, и это сработало идеально. Я разместил пример со скриншотами в моем блоге: http://www.thomasvendetta.com/css/gap-in-unordered-list-displayed-inline/

• Томас Вендетта

Answer 2

Лучше всего сбросить все отступы / поля на <li> и <ul>, а затем добавить отступы по мере необходимости для фонового изображения:

ul, li {
    padding: 0;  
    margin: 0;
}

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

Answer 3

Вы пробовали использовать отрицательное поле?

li { margin-bottom: -2px; }

Эти недостатки браузеров в разных браузерах будут существовать всегда, этот прием с запасом обычно экономит много времени при настройке макета.