Safari上的CSS问题：div中意外的空间

乱数假文
洛勒姆
同侧眼睑

我已经创建了如上所述的代码笔来演示这个问题。还包括材质UI的类。使用chrome查看页面时，一切正常。但是，在Safari的div中插入了意外的空格

黄色的div应该与蓝色的div具有相同的高度，但是它不在Safari中。当我使用开发人员工具检查时，它不是边距或填充。是什么导致了这个问题

<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>