webkit - неверное отображение выравнивания по центру Inline-block

[Zverushka]

Сейчас модно использовать инлайн-блоки. Очень удобно - выравниваются по центру, но если я захочу задать свое расстояние между ними через word-spacing, то хроме неверное отображает центральное выравнивание.

Как это обойти?

http://jsfiddle.net/XZ8Kw/2/

Можно также заметить, что маргин-лефт с убиранием пробелов ведет себя также некорректно, но уже искажение идет влево

http://jsfiddle.net/XZ8Kw/4/

Если заменить на letter-spacing, то начинает выравниваться правильно. Но насколько кроссбраузерно такое решение, все ли браузеры (и старые в том числе) будут отображать корректно?

УПД. Но если убрать опять же word-spacing - letter-spacing также начинает косить влево.

Edited October 15, 2013 by Zverushka

[SelenIT]

Ох уж этот вебкит с word-spacing'ом для инлайн-блоков... вечно в нем проблемы. То вообще не работал, теперь с виду работает, но загадочно (напр. при смене переносов строк на обычные пробелы зазоры между элементами почему-то... удваиваются — ни дать ни взять отступы у float'ов в IE6!).

А вот letter-spacing у меня, по крайней мере, в актуальном Хроме (30.0.1599.69) и предпоследнем Яндекс-браузере (1.7.1364.22076) работает стабильно (http://jsfiddle.net/XZ8Kw/5/). По идее, с положительными значениями проблем быть не должно нигде (с отрицательными начиная от -.3em и положительными свыше 328px были проблемы в Опере/Престо).

Наскоро попробовал подход с прогр. улучшением до флексбоксов — что-то сходу не вышло... Может, у вас лучше получится?

Но .43em пора выжечь каленым железом. Ведь никто так и не знает, откуда оно взялось. .31em (ширина пробела в Гельветике) или даже .42em (1% от ответа на Главный вопрос) я бы еще понял...

[Zverushka]

А как сделать выравнивание блоков по центру?

Может поместить ряд блоков с флоат лефт в инлайн блок, расположенный по центру - тогда точное отображение гарантировано?

[SelenIT]

Увы, только если они уместятся в одну строку…

А в чем всё-таки проблема с положительным letter-spacing'ом (без word-spacing'а)? Я так и не смог ее увидеть.

[Zverushka]

Только что столкнулась с проблемой у заказчика, делала счетчик с инлайн блоками и поставила им ворд-спейсинг. так счетчик на 50 пикселей за экран на мобиле убегал (при чем только на его, на браузершотс какую виртуалку не грузила - все нормально было однако).

Изменила на letter-spacing и все встало на место.

В общем word-spacing лучше не использовать.

Edited October 18, 2013 by Zverushka

[SelenIT]

Мда. Баги вебкита — престранный предмет: вроде пофикшены, вроде и нет. Вот они, первые ласточки новой монокультуры...

[Zverushka]

Монокульты? А что ты используешь для выравнивания блоков из списков?

[SelenIT]

Честно говоря, с задачей расстановки постоянных промежутков между инлайн-блоками я пока не сталкивался . Мне чаще встречалась задача гибкого растягивания такого списка по ширине (тогда justify + псевдоэлемент-распорка с width: 100%) и сжимания вплотную (в боевых проектах, если нет возможности честно удалить пробелы, в основном использую font-size:0). Ну а так, видимо, альтернативы letter-spacing'у нам просто не оставили. Можно посмотреть в сторону флексбоксов с justify-content: space-between/space-around.

А про монокультуру вебкита это я просто ворчу по-стариковски, не обращайте внимания. Просто тут недавно многие радовались «пусть будет один вебкит, он классный», а другие вспоминали, что IE5.5 в своё время тоже был классным. И увы, чем дальше, тем больше тревожных аналогий...

[sigma77]

http://jsfiddle.net/XZ8Kw/10/ - не такого эффекта надо добиться?

[Zverushka]

@sigma77, если в 2 -3 ряда идут блоки, то они уже неровно стоят)...

[sigma77]

@sigma77, если в 2 -3 ряда идут блоки, то они уже неровно стоят)...

Да, блин, косоглазие моё... )

[Zverushka]

Тогда вот так наверное пойдет? сразу как-то недостатков найти не могу.

http://jsfiddle.net/XZ8Kw/11/

Только можно ли быть уверенными, что леттер-спейсинг будет весь одинаково работать с инлайн-блоками? Потому как указывать его проще.

Edited October 19, 2013 by Zverushka

[SelenIT]

У леттер-спейсинга в старых Операх странные ограничения были. Кроме этого, лично мне о каких-либо проблемах с ним не известно.

Древний хак с компенсирующимся марджином тоже вариант, если он не наезжает на что-нибудь кликабельное в соседней колонке и т. п.

[Zverushka]

Все - теперь леттер спейсинг в помойку - в хроме при первой загрузке блоки с ним слипаются.

Как еще по центру выровнять блоки? Кажется остается только два боковых маргина, как следствие искуственное увеличение родительского блока и сдвиг его влево. Что очень плохая идея с нефиксированный фраппером .....

Edited November 29, 2013 by Zverushka