Почему не работает вертикальное выравнивание внутреннего блока в Хроме?

Question

[Полина Емельянова]

Здравствуйте, коллеги!

Прошу, помогите с элементарной задачкой.
САБЖ: пытаюсь выровнять иннер внутри блока через задание обоим inline-block и псевдоэлемент
ПРОБЛЕМА: Выравнивание не работает в Хроме! В ФФоксе - все нормально!
КОД: codepen.io/emelyanova/pen/xqegjj
ЖИВАЯ ВЕРСТКА dev.imdeveloper.ru/dream
Прошу, укажите, где я ошиблась?

Заранее ОГРОМНОЕ!!! Спасибо

ЗЫ: Флексы НЕ использовать.((( К сожалению, нужна поддержка ИЕ9 и более старых Хрома и Лисы, а главное сафарных Айфонов... Целевая у зака такая.(((

Answer 1

[alvvi]

codepen.io/Alvvi/pen/QpPpVm
Вроде бы работает и там и там, но точно не скажу, все же этот способ - своеобразный хак, лучше использовать более надежные варианты.

Comments

[Полина Емельянова]

Илья, простите, прошу вас, поясните, вы добавили margin-right: -0.25em; Я пытаюсь нагуглить такой прием , но внятного объяснения его работы найти не могу. Прошу вас, если не сложно и вы можете, поясните принцип...
Я вижу, что у вас идет before... 0,25em...

[Сергей Горячев]

Илья Ростопка, -.25em мало, для FF нужно -.35em. На линуксе точно разваливается. Толкьо недавно столкнулся с таким же костылем от одного верстальщика. Пришлось переправлять. Да и в текущем примере все развалилось.

Полина Емельянова, https://habrahabr.ru/post/189118/ тут найдется ваш пример.

[alvvi]

Полина Емельянова: прием взят из этой статьи, там же есть краткое описание зачем оно надо. Более подробное описание нашел в книге CSS Mastery за авторством Andy Budd'a, вот скриншот объяснения

[Полина Емельянова]

Илья Ростопка: Боже... Точнее W3C - спасибо тебе за ФБоксы...

Answer 2

[Сергей Горячев]

ЗЫ: Флексы НЕ использовать.((( К сожалению, нужна поддержка ИЕ9 и более старых Хрома и Лисы, а главное сафарных Айфонов... Целевая у зака такая.(((

Что мешает для современных браузеров писать flex, а для старья хаки?
stackoverflow.com/questions/24371408/flexbox-alter...

Да и -webkit-box, -moz-box, -ms-flexbox, -webkit-flex не отменили пока.
https://css-tricks.com/forums/topic/flexbox-not-wo...

В идеале, можно вообще включить флексы через @supports.
https://habrahabr.ru/post/178021/

@supports (display: flex) {
  div { display: flex; }
}
@supports not (display: flex) {
  div { float: left; }
}

ИМХО: Костыли нужно писать для старых браузеров, а не для новых.