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&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:auto; &nbsp;&nbsp;}并删除padding-bottom修复了这个问题。