网站营销的定义,磁力搜索,网站建设技术包括哪些内容,鼠标网站模板一、问题背景#xff1a; UI要求要实现这样的效果#xff0c;使用 display:-webket-box在chrome浏览器下完美解决 但是马上啪啪打脸#xff0c;在safari浏览器下显示空白 #xff0c;不能不说浏览器之间的兼容性简直就是天坑
二、解决办法
通过浏览器调试发现原本float的…
一、问题背景 UI要求要实现这样的效果使用 display:-webket-box在chrome浏览器下完美解决 但是马上啪啪打脸在safari浏览器下显示空白 不能不说浏览器之间的兼容性简直就是天坑
二、解决办法
通过浏览器调试发现原本float的右边“6种”元素变成了块级元素独占一行
tag 独占一行说明至少有类似 block 块级元素的特性存在而 float 之后本身就是会将元素转为块级。想到这里突然想到-webkit-box 这个是早期版本的 flex 布局那会不会就跟 display: flex; 这个一样当有了 flex 容器之后flex 元素就不再是 BFC、IFC 之类的而是 FFC 呢?
如果真是这样的话那么是不是就可以多嵌套一层由最外层控制文本多行截断最里层控制 tag 的浮动效果呢?于是改变一下 HTML 结构。
于是在最外层再包一个div把原先的display:-webket-box放在最外面的div样式里这下总算解决了
