Блог

https://codepen.io/06444929923/pen/gOMKaJd

 <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column">
  <div class="x-a MuiGrid-root MuiGrid-item">
    <div class="x-b">
      <div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2">
        <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">Lorem ipsum</div>
        <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true">
          Lorem
        </div>
        <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">
          <p>Lorem ipsum</p>
        </div>
      </div>
    </div>
  </div>
</div>
  

Я создал codepen, как указано выше, чтобы продемонстрировать проблему. Также включены классы для material UI. Все в порядке при просмотре страницы с помощью Chrome. Однако в div для Safari вставляются неожиданные пробелы.

Желтый div должен иметь ту же высоту, что и синий, однако его нет в Safari. Это не поля или отступы, когда я проверяю с помощью инструментов разработчика. Что вызывает проблему?