一、問題背景：
UI要求要實(shí)現(xiàn)這樣的效果，使用 display:-webket-box在chrome瀏覽器下完美解決
但是馬上啪啪打臉，在safari瀏覽器下顯示空白?，不能不說瀏覽器之間的兼容性簡(jiǎn)直就是天坑
二、解決辦法
通過瀏覽器調(diào)試發(fā)現(xiàn)原本float的右邊“6種”元素變成了塊級(jí)元素，獨(dú)占一行
tag 獨(dú)占一行，說明至少有類似 block 塊級(jí)元素的特性存在，而 float 之后本身就是會(huì)將元素轉(zhuǎn)為塊級(jí)。想到這里，突然想到，-webkit-box 這個(gè)是早期版本的 flex 布局，那會(huì)不會(huì)就跟 display: flex; 這個(gè)一樣，當(dāng)有了 flex 容器之后，flex 元素就不再是 BFC、IFC 之類的，而是 FFC 呢?
如果真是這樣的話，那么是不是就可以多嵌套一層，由最外層控制文本多行截?cái)?，最里層控?tag 的浮動(dòng)效果呢?于是改變一下 HTML 結(jié)構(gòu)。文章來源：http://www.zghlxwxcb.cn/news/detail-654001.html
于是在最外層再包一個(gè)div把原先的display:-webket-box放在最外面的div樣式里，這下總算解決了！文章來源地址http://www.zghlxwxcb.cn/news/detail-654001.html
到了這里，關(guān)于-Webkit-Box 在 Safari 中出現(xiàn)的兼容性問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
