Мария Коробкоголовых

Это можно сделать с помощью условных комментариев.

Прямо в index.html указать например:

<!--[if !(IE 11)]>
    <h1>Вы используете браузер устаревшей версии!</h1>
  <![endif]-->

Версию IE можешь указать какую угодно

Только на мобильных? Попробуй тогда прописать text-size-adjust: none; для html или body..

Нужно родительскому элементу (ссылке, в которой лежит after) прописать
position: relative;

https://codepen.io/Rikazavr/pen/MzVgpb

IE11 поддерживает флексы частично, есть баги

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

Попробуй подключить bricks.js, который будет красиво располагать плашки с разной высотой



с помощью css не получится такое сделать

Мне всегда казалось, что в идеологии БЭМ вложенность -- табу. Стараюсь избегать ее, присвоить элементу класс не так уж обременительно. Но позволяю себе пользоваться селекторами типа :not(:last-child), nth-child, потому что без них иногда не обойтись

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

Следи за тем, чтобы вендорные префиксы были расставлены. Рекомендую установить autoprefixer в проект, он будет делать это за тебя. Если сомневаешься в какой-то технологии/css-свойстве, можешь на сайте can i use смотреть как эти технологии поддерживаются в разных браузерах



Можешь еще проверять верстку на валидность

Используй flexbox. То, что тебе нужно, будет выглядеть так

Немного подумала и вроде решила твою задачу:
решение

У дочерних элементов должна быть фиксированая высота или она будет увеличиваться в зависимости от контента? Может max-height или flex-grow: 0; помогут?

А что нужно анимировать: сами стрелки или градиент?

flex-wrap: wrap; не пробовал?

демка

Или я неправильно поняла суть твоей задачи