-Webkit-Box 在 Safari 中出现的兼容性问题（bug？）
我要评论
本文转载自微信公众号「志语自乐」，出现作者linxz。容性转载本文请联系志语自乐公众号。问题
问题来源背景
这个是出现当时在『iCSS前端CSS交流讨论』群中看到的，当时转为朋友的容性提问是这样的：
看这个图，主要是问题有两点：多行截断和 tag 环绕。多行截断那就是出现用 -webkit-box 那种方式，tag 环绕呢那就是容性早期图文环绕的方式，用 float 就好了。问题
理想是出现丰满的，现实是容性骨感的。未经他人之苦，问题一切都是出现那么轻松。当我提到说使用 float 就可以实现后，容性群里有朋友反馈说在 Safari 和移动端会有问题。问题
事实上我的确也没在意过，于是事后尝试了一下，的云服务器提供商确如此。
摸索前进
这是一个比较奇怪的现象，首先就我个人而言的确是没有见到过这样的情况，之前都没有这样类似的需求。
初次尝试
在没有查阅任何资料之前，直接做了一个最简单的 demo 看效果。
<div class="text-overflow"> <span class="tag">new</span> 很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容 </div>一个很简单的 HTML 结构和一份很简单的 CSS 样式。
.text-overflow { width: 200px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.425; background-color: pink; } .tag { float: right; padding: 0 2px; color: #fff; background-color: #f32600; border-radius: 2px; }最终的效果就是前面所看到的，在 Chrome 中很完美地得到期望结果，但是 Safari 中发现 tag 不见了，并且有一条空白存在。
按照常规想法，一般这种内容突然不见的，如果不是被截断了就是被覆盖了，或者渲染有问题。尝试性在 .tag 中增加了 position: relative; 看看效果，发现 tag 出现了，b2b供应网并且是独占一行。
设想
tag 独占一行，说明至少有类似 block 块级元素的特性存在，而 float 之后本身就是会将元素转为块级。想到这里，突然想到，-webkit-box 这个是早期版本的 flex 布局，那会不会就跟 display: flex; 这个一样，当有了 flex 容器之后，flex 元素就不再是 BFC、IFC 之类的，而是 FFC 呢?
如果真是这样的话，那么是不是就可以多嵌套一层，由最外层控制文本多行截断，最里层控制 tag 的浮动效果呢?于是改变一下 HTML 结构。
<div class="box"> <div class="text-overflow"> <span class="tag">new</span> 很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容 </div> </div>在原有的基础上，增加一层，CSS 部分也改变一下，云服务器其实只要把选择符 .text-overflow 换成 .box 就可以了。
.box { width: 200px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .tag { float: right; padding: 0 2px; color: #fff; background-color: #f32600; border-radius: 2px; }那么最终的结果就是这样。也就是说的确是 -webkit-box 的影响，而且应该就是 FFC 的关系。至于浏览器中差异可能就是兼容性问题了。
查资料
既然 -webkit-box 是早期 flex 布局的一个版本，那么必定还有其他一些属性，比如以下几个：
box-pack; box-align; box-orient;那么就按照这个思路，我们可以看看 flex 相关的资料文档。
在之前的 flex 教程文档(https://www.yuque.com/linxz/flex)有关 display: flex; 有过介绍，前面也提到了 FFC，那么具体的我们也可以从 w3c 文档中看到：
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.
以上内容来自：https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context
其中 A flex container establishes a new flex formatting context for its contents. 和 floats do not intrude into the flex container，至少说明了在 flex 布局中，浮动是有“可能”是无效的。
我的结论
针对这个问题的处理方式，我的结论，是的，仅仅只是代表我个人的一个结论就是：多套一层，由外层控制元素多行截断，最里层去实现浮动环绕的效果，避开因为 flex 容器而导致子元素浮动失效的情况。
相关文章
日版iPhone6信号强度究竟如何？（探究日版iPhone6信号强度表现，解析关键因素）
摘要：作为iPhone系列中的一员，iPhone6在全球范围内都享有盛誉。然而，由于不同地区的市场需求和技术差异，苹果推出了不同版本的iPhone6，其中包括了日本专用的日版iPhone...2025-11-04荣耀9信号强劲稳定，完美解决通信难题（荣耀9信号强劲稳定，让你畅快体验高速通信）
摘要：在移动互联网时代，手机信号质量成为了人们关注的一个重要问题。作为一款备受瞩目的智能手机产品，荣耀9凭借其强大的信号表现，为用户提供了畅快无阻的通信体验。一：突破性技术的加持...2025-11-04- 摘要：近年来，随着科技的迅猛发展，3D电视成为家庭娱乐领域的一大热门。夏普作为一家技术领先的电子产品制造商，推出了引领行业的夏普3D液晶电视。它不仅具备出色的画质，还拥有卓越的性能，为观...2025-11-04
小狗除螨仪的使用及效果分析（宠物护理神器，让小狗远离螨虫困扰）
摘要：在养宠物的过程中，螨虫问题一直是令主人头疼的难题。而针对小狗的螨虫问题，小狗除螨仪成为了一种非常有效的解决方法。本文将介绍小狗除螨仪的使用方法及其效果分析。一、选购合适的小...2025-11-04用电脑合成人物剪纸，打造独特的手工艺品（电脑合成剪纸教程，手工艺品新潮流）
摘要：剪纸作为一种传统的手工艺品，一直以来都备受人们的喜爱。而随着科技的发展，电脑合成人物剪纸成为了一种新的手工艺品制作方式。通过电脑技术的辅助，我们可以创造出更加精细、更加独特的剪纸作...2025-11-04以朗科U盘量产教程（轻松掌握朗科U盘量产技巧，助您高效制作U盘）
摘要：随着科技的不断发展，U盘已经成为我们日常生活和工作中必不可少的工具之一。在使用U盘的过程中，很多人可能会遇到一些问题，如容量显示错误、无法识别等。而朗科U盘量产工具则可以帮助我们解...2025-11-04
最新评论