在IE11和iPhone上的Safari重疊的Flex盒

我設計的網站沒有通過iPhone和IExplorer11正確顯示。我檢查它在IE11和iPhone上的Safari重疊的Flex盒

窗口（鉻，FFox）OK

的Android（鉻）OK

Ipad的Safari瀏覽器，Chrome瀏覽器OK

iPhone Safari和IE11 重疊問題

該網站是dis無論何時flex-direction：列媒體查詢出現重疊問題，都會在大屏幕上的IE11上正確播放。

我有一個基礎的div #main包括另外兩個基礎的div #right和#left

爲基礎的div我的CSS代碼：

#main{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 

    padding: 10px; 
    background-color: #f0f0f0; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); 
    position: relative; 
} 


#left{ 
    -webkit-box-flex: 4; 
    -webkit-flex-grow: 4; 
    -ms-flex-positive: 4; 
    flex-grow: 4; 

    -webkit-flex-basis: 66.66%; 
    -ms-flex-preferred-size: 66.66%; 
    flex-basis: 66.66%; 

    -webkit-flex-shrink: 0; 
    -ms-flex-negative: 0; 
    flex-shrink: 0; 

    margin-right: 7.5px; 
    position: relative; 
} 


#right{ 
    -webkit-box-flex: 2; 
    -webkit-flex-grow: 2; 
    -ms-flex-positive: 2; 
    flex-grow: 2; 

    -webkit-flex-basis: 33.33%; 
    -ms-flex-preferred-size: 33.33%; 
    flex-basis: 33.33%; 


    -webkit-flex-shrink: 0; 
    -ms-flex-negative: 0; 
    flex-shrink: 0; 

    margin-left: 7.5px; 
    position: relative; 
} 

@media (max-width: 755px){ 
    #main{ 
     -webkit-box-orient: vertical; 
     -webkit-box-direction: normal; 
     -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
     flex-direction: column; 
    } 
}

當我檢查iPhone上的Safari以及IE11的網站（小屏幕）右側部分重疊在左側部分。

我試過一些解決方案，但沒有一個沒有工作。（如設定最小高度）

我在等你的意見。謝謝您的閱讀。

here is the link to the page

來源

2016-05-12 u238

我可以更好地幫助你，如果你提供的鏈接工作代碼。 –

當然這裏是[鏈接]（http://www.csstr.com/FS/david/） – u238

感謝您的這一點。揭示IE11中重疊的問題也讓我有了一種方法來測試它，以解決我的重疊問題。切換到'flex-direction：row'和'flex-wrap：wrap'解決了它的設計問題。 – coladict

這解決了我的一切：

@media (max-width: 755px){ 
    #main { 
    display: block; /* remove flex parent */ 
    } 
}

或該版本：

@media (max-width: 755px){ 
    #left, #right { 
    flex-basis: auto; 
    } 
}

來源

2016-05-12 22:18:32

謝謝安迪。它在IE11上完美運行。我明天會在iPhone上測試它，但我相信它也可以在iPhone上運行。 – u238

Mac/Safari也遭到破壞，這也是我測試過的地方。希望移動Safari，我還沒有測試，與我的答案打得很好。 –

在IE11和iPhone上的Safari重疊的Flex盒

回答

相關問題