在Safari上不顯示的Flex /塊元素

我正在開發此網站，並且Safari上沒有顯示頂部的第一個滑塊。我只有一個iPad，因此我無法檢查它是隱藏的還是具有0高度，但之前我曾經遇到過flex和Safari的問題，我相信flex元素的高度爲0。我已經將元素（.fs-default .slides）更改爲顯示：block，並嘗試清除iPad上的緩存，但仍未顯示。這可能是一個緩存問題。在Safari上不顯示的Flex /塊元素

我有一種感覺，顯示有一個普遍問題：在Safari上有0高度的彈性元素，但我還沒有發現任何其他人有同樣的問題。

下面是我加入到載玻片元件的樣式：

.fs-default .slides { 
    height: 500px; 
    display: block; 
    min-height: 60vmin; 
    align-items: center; 
}

滑塊和滑動的結構是這樣的，其中，每個li是一個滑動。

<div class="fs-default"> 
    <div> 
    <ul class="slides"> 
     <li> 
     <img> 
     </li> 
     <li> 
     <img> 
     </li> 
     <li> 
     <img> 
     </li> 
    </ul> 
    </div> 
</div>

正如我不能確定問題，這是很難知道這個問題，包括什麼，所以我會鏈接到網站也是如此，如果這個問題是在其他地方。 http://dev.physelec.com.au/

http://codepen.io/anon/pen/qrRVew這是我試圖展示問題的一支筆。奇怪的是，這與網站的問題不一樣。

來源

2017-03-09 Chris Cook

[Flexbox代碼適用於除Safari之外的所有瀏覽器。爲什麼？]（http://stackoverflow.com/q/35137085/3597276） –

您是否曾嘗試在您認爲不工作的選擇器之前添加-webkit-box-？ – Larpee

添加顯示：-webkit-box-沒有幫助。 –

如果您在header和.main-content-area上撤消flex和display: flex，則該佈局在Safari中可用。我不認爲這些屬性是必要的，我認爲這是您使用flex的簡寫，您將flex指定爲0（第3個值）。 http://codepen.io/anon/pen/evWVaY

來源

2017-03-12 03:02:53

工作魅力。獎勵點，如果你能告訴我一個語法，將正確顯示在Safari中的flex元素？它表示完全支持。 –

@ChrisCook真棒。 Flex在最新版本中工作得很好......什麼特別不起作用？寫得很快。 http://codepen.io/anon/pen/evWVaY –

具有彈性方向的彈性元素：列的高度爲0，而不是展開以適應其內容。 –

在Safari上不顯示的Flex /塊元素

回答

相關問題