Убираем inline-block отступы

Всем хорошо свойство display:inline-block

  • его можно использовать вместо float:left для выстраивания объектов верстки, при этом не заморачиваясь со всякими clearfix и отступами
  • оно поддерживает вертикальное выравнивание vertical-align, что еще важнее и недооценить это невозможно!

Но, так же оно имеет и ряд недостатков

  • черезжопно поддерживается старыми версиями «Осла» (IE7 и ниже), а также совсем старыми версиями FF, на что можно забить, и как то странно отображается в Opera и Safari
  • между inline-block объектами образуются загадочные отсутупы, которые портят всю малину

Первый пункт решается хаком inline-block для IE7

Второй же пункт возникает из-за наличия пробелов и переносов строк в коде. Если убрать переносы, то все станет красиво, но не читабельно с точки зрения кода. А решается различными вариантами, вот один из них.

Для фикса данного глюка нужно родителю нашего объекта задать определенные свойста. Рассмотрим на примере списка

  1. ul {font-size: 0; line-height: 0; letter-spacing: -1px;}
  2. li {font-size: 14px; line-height: normal; letter-spacing: normal;}

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

И еще заметил, что letter-spacing: -1px; стал лажать в последнем FireFox (26.0 на данный момент) и вместо него лучше ставить

letter-spacing: -0.3em;
Теги: