Flex 元素与背景图像在 Safari 中重叠

Question

这是一个用 Gatsby 构建的响应式单页面：<div className='sections'>                  <section className='section1'>    <h1 className='title'>Title</h1>    <div className='subTitle'>       <h1 className='subtitleRow'>Subtitle</h1>       <div className='logo'>          <img src={logo} alt='Logo'></img>       </div>                             </div>     <p className='someText'>Blablabla</p>     <p className=‘someText'>More blablabla</p>   </section>    <section>        … same stuff as previous section    </section></div>我正在使用这个不错的 hack如何让 div 高度自动调整为背景大小？设置具有背景图像的 div 的高度。这在 Chrome 和 Firefox 中工作正常，但在 Safari（MacOS 和 iOS）中，p 元素显示在部分容器的顶部，与标题和副标题重叠。检查 DOM 元素的顺序与定义的顺序相同...我尝试设置显示、弯曲方向、顺序属性，但没有成功......有任何想法吗？谢谢！

Answer 1

环境

.section1 {
    height:auto;
  }

并删除padding-bottom修复了这个问题。