Как победить разный рендер свойства align-item в firefox и Chrome?

Question

[Кирилл]

Есть такая проблема, встраиваю в кнопки svg иконку, у ней свойство display: inline-flex; align-items: center;
В хроме всё нормально по центру выравнивается, а в FireFox надпись смещена в конец блока, как будто flex-end .
В чём проблема, и как это побороть?

UPD: Ссылка на PEN

Скрины

Хром
Лиса

Comments

[Ankhena]

Размеры проверяйте.
Или выкладывайте код в песочницу.

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

[Кирилл]

Ankhena, добавил в вопрос ссылку на codepen. Flex задаётся кнопке которая содержит иконку и текст.

[Максим]

Кирилл, этот svg - это эти две иконки ?

[Ankhena]

Кирилл, Боги, что у вас в коде.
Зачем вам миксины для вендорных префиксов, 100 лет как есть автопрефиксер.

Дело не в выравнивании иконок, а в отображении шрифта. Попробуйте заменить на что-нибудь, хоть на Goergia и увидите.

[Кирилл]

Ankhena, Понял, принял, спасибо! :)
О шрифтах даже не подумал.
Префиксы нужны потому что вполне возможно что работать это будет в старых браузерах.

[Ankhena]

Кирилл,

Префиксы нужны потому что вполне возможно что работать это будет в старых браузерах.

https://autoprefixer.github.io/ru/

А еще лучше подключать его в сборку.
Писать их прямо в исходном коде фу-фу-фу.

[Кирилл]

Ankhena, А кто сказал что я их пишу в исходниках. :)
Мне пришлось идти и доставить из каждого скомпиленого компонента css и вставлять его в pen.

Answer 1

[Николай]

попробуй просто display: flex

Comments

[Кирилл]

Пробовал, не помогает.
Делал ещё align-items: stretch тогда в firefox норм, но в хроме ломается.

[Николай]

Кирилл, можете в песочнице написать этот код))

[Николай]

Кирилл, вы даёте display: inline-flex; самой иконке?

[Кирилл]

Николай, добавил в вопрос ссылку на codepen. display: inline-flex задаю самой кнопке.