爲什麼在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

來源

2017-01-08 Jozef Cipa

您的代碼無法像發佈一樣進行測試（也許代碼段會很有效）。我會嘗試將img包裝在一個容器中'.avatar {flex：1;} .avatar img {max-height：100％}'一個flex容器的img直接子代通常是一個麻煩（伸展/擴展不如預計）：（ –

@GCyrillus我已經解決了它，問題不是'div容器'，而是'flex：0 0 20％'。當我刪除這行時，一切正常。 –

你可以發佈答案你自己或至少更新問題的細節如何解決它:)？對於具有相同問題的其他用戶可能有用 –

解決：我只是刪除flex: 0 0 20%從.avatar-wrap線和一切正常。

來源

2017-01-08 15:00:45

爲什麼在Safari移動設備上Flexbox的圖像位置被破壞？

回答

相關問題