Chrome добавляет серые разделители между div, когда Firefox не

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

Я провел эксперимент, придав родительскому контейнеру фоновый цвет красного цвета, и, как и ожидалось, разрывы стали красными:

[115 ] Может быть, Firefox округляет некоторые из этих значений, но зачем они вообще нужны?

Полагаю, у вас есть какой-то автоматический конструктор сайтов, выполняющий эти странные вычисления?

Я бы добавил background:#fff, а не transparent, что, похоже, решит вашу проблему.

.rules-info {
    display: inline-block;
    background: #fff;
    vertical-align: top;
    width: 362.19px;
    margin: 0 10px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
}