Кросс-браузерная ошибка (я пытался сбросить CSS)

Question

У меня серьезные проблемы с кроссбраузерностью, и я не знаю почему Я использую тему, которая обычно не имеет таких проблем, и я попытался использовать CSS сброс. Вопрос можно увидеть на этом изображении https://imgur.com/a/B8pc5qP. Если у меня есть два поля, они выглядят совершенно по-разному в Safari и Chrome, что делает невозможным стилизацию, так как в версии Chrome всегда намного больше пробелов.

Проблема должна с заголовками. Заполнение ниже / пространство ниже в Safari намного меньше для всех заголовков.

Answer 1

Похоже, вы используете старый добрый clearfix. clearfix ожидает, что там будет float Эд детей. Добавление float:left; к последнему элементу - это то, что ожидает clearfix. Я сделал следующее, и эти поля выглядят похоже в Chrome & Safari.

<div class="column_attr clearfix" style="background-color:#ffffff;box-shadow: 3px 3px 10px rgba(0,0,0,0.15);">
    <h3>Bonzo</h3>
    <h3></h3>
    <h6 style="float: left;">A better food experience.</h6>
</div>

1. Я бы предложил сделать это через CSS, я просто сделал это через HTML для примера .

.clearfix h6 {
    float: left;
}