3
所以我設計了這個在CSS中,這個想法是有一個標題和其餘作爲可滾動的內容。
(有底部的實時演示鏈接)爲什麼在Safari中這個flexbox佈局被破壞?
正如你所看到的,高度的標題被錯誤計算,導致綠框溢出。
我把問題縮小到頭的錯誤計算flex-basis
。或者我相信。
現場演示這裏:http://jsbin.com/zusavefoqu
不知道如何解決它?
謝謝!
所以我設計了這個在CSS中,這個想法是有一個標題和其餘作爲可滾動的內容。
(有底部的實時演示鏈接)爲什麼在Safari中這個flexbox佈局被破壞?
正如你所看到的,高度的標題被錯誤計算,導致綠框溢出。
我把問題縮小到頭的錯誤計算flex-basis
。或者我相信。
現場演示這裏:http://jsbin.com/zusavefoqu
不知道如何解決它?
謝謝!
您可能需要添加供應商前綴。
目前,flexbox支持所有主流瀏覽器,except IE 8 & 9。
一些最近的瀏覽器版本,如Safari 8和IE10,需要vendor prefixes。
要快速添加所需的所有前綴,請在左側面板中將您的CSS張貼到此:Autoprefixer。
而且,好像有兩個問題在Safari佈局:
#more
丟失。有關常見彈性錯誤及其變通方法的列表,請參閱本頁:Flexbugs。
謝謝,我確實使用了自動加前綴。忘了提及它。本演示簡化 – Ben
感謝您的鏈接!雖然您沒有立即提供解決方案,但列表中的第一個問題解決了我的問題! 'flex-shrink:0' – Ben