一、问题背景：
UI要求要实现这样的效果，使用 display:-webket-box在chrome浏览器下完美解决
但是马上啪啪打脸，在safari浏览器下显示空白 ，不能不说浏览器之间的兼容性简直就是天坑
二、解决办法
通过浏览器调试发现原本float的右边“6种”元素变成了块级元素，独占一行
tag 独占一行，说明至少有类似 block 块级元素的特性存在，而 float 之后本身就是会将元素转为块级。想到这里，突然想到，-webkit-box 这个是早期版本的 flex 布局，那会不会就跟 display: flex; 这个一样，当有了 flex 容器之后，flex 元素就不再是 BFC、IFC 之类的，而是 FFC 呢?
如果真是这样的话，那么是不是就可以多嵌套一层，由最外层控制文本多行截断，最里层控制 tag 的浮动效果呢?于是改变一下 HTML 结构。文章来源：https://www.toymoban.com/news/detail-654001.html
于是在最外层再包一个div把原先的display:-webket-box放在最外面的div样式里，这下总算解决了！文章来源地址https://www.toymoban.com/news/detail-654001.html
到了这里，关于-Webkit-Box 在 Safari 中出现的兼容性问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
