为什么在Safari移动设备上Flexbox的图像位置被破坏？

问题描述：

我在iPhone上的Safari浏览器中的图像位置有问题（视网膜显示）。正如您可能会看到网站处于移动版本时，我将flex-direction从row更改为column，并将图像大小忽略。它重叠div.text为什么在Safari移动设备上Flexbox的图像位置被破坏？

编辑：解决： 我只是删除从.avatar-wrap线flex: 0 0 20%和一切正常。

HTML：

<div class="reference"> 
     <p class="text"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. 
     </p> 
     <div class="avatar-wrap"> 
      <img src="./assets/img/avatar.png" class="avatar"> 

      <div> 
       John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a> 
      </div> 
     </div> 
</div

和CSS：

div.reference 
    width: 90% 
    display: flex 
    align-items: center 
    color: gray 
    margin-top: 20px 

    @media screen and (max-width: 1240px) 
     flex-direction: column 
     width: 100% 
     font-size: .9em 

    p 
     padding: 20px 

     &:before 
      content: '“' 
     &:after 
      content: '”' 

    .avatar-wrap 
     flex: 0 0 20% 

     display: flex 
     flex-direction: column 

     justify-content: center 
     align-items: center    

     div 
      margin-top: 15px 
      text-align: center 

      a 
       color: black 

.avatar 
    max-height: 256px

您的代码无法像发布一样进行测试（也许代码段会很有效）。我会尝试将img包装在一个容器中'.avatar {flex：1;} .avatar img {max-height：100％}'一个flex容器的img直接子代通常是一个麻烦（伸展/扩展不如预计）：（ –

@GCyrillus我已经解决了它，问题不是'div容器'，而是'flex：0 0 20％'。当我删除这行时，一切正常。 –

你可以发布答案你自己或至少更新问题的细节如何解决它:)？对于具有相同问题的其他用户可能有用 –

答

解决：我只是删除flex: 0 0 20%从.avatar-wrap线和一切正常。

为什么在Safari移动设备上Flexbox的图像位置被破坏？

相关推荐