2016-01-24 109 views
3

所以我設計了這個在CSS中,這個想法是有一個標題和其餘作爲可滾動的內容。
(有底部的實時演示鏈接)爲什麼在Safari中這個flexbox佈局被破壞?

Layout as seen in chrome

唉,在Safari它壞了,是這樣的: Layout in Safari

正如你所看到的,高度的標題被錯誤計算,導致綠框溢出。

我把問題縮小到頭的錯誤計算flex-basis。或者我相信。

現場演示這裏:http://jsbin.com/zusavefoqu

不知道如何解決它?

謝謝!

回答

3

您可能需要添加供應商前綴。

目前,flexbox支持所有主流瀏覽器,except IE 8 & 9

一些最近的瀏覽器版本,如Safari 8和IE10,需要vendor prefixes

要快速添加所需的所有前綴,請在左側面板中將您的CSS張貼到此:Autoprefixer


而且,好像有兩個問題在Safari佈局:

  • 頭溢出,並
  • 垂直滾動條上#more丟失。

有關常見彈性錯誤及其變通方法的列表,請參閱本頁:Flexbugs

+0

謝謝,我確實使用了自動加前綴。忘了提及它。本演示簡化 – Ben

+2

感謝您的鏈接!雖然您沒有立即提供解決方案,但列表中的第一個問題解決了我的問題! 'flex-shrink:0' – Ben

相關問題