-Webkit-Box 在 Safari 中出现的兼容性问题

一、问题背景:

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样式里,这下总算解决了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/94927.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索性测试及基本用例

1 测试决策5要素 测试目标:所有的重要任务都完成了,而剩下没做的事情是比较次要的,我们做到这一点就可以尽早尽可能地降低发布风险。 测试方法:测试是一个不断抉择的过程,测试人员必须理解运行测试用例时和分析现有信…

Java算法_ 二叉树的最大深度(LeetCode_Hot100)

题目描述:给定一个二叉树 ,返回其最大深度。root 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 获得更多?算法思路:代码文档,算法解析的私得。 运行效果 完整代码 /*** 2 * Author: LJJ* 3 * Date: 2023/…

去年校招面试中Hadoop高频都问些什么?秋招在即,快收藏!

1 总述 校招是远不同于社招的,企业对学生的要求更多的是一些概念性的东西,即所谓的八股文。但有些场景类的题目也是会涉及到,尤其是在一些中大厂的面试题中。场景题固然是能不能中大厂中必不可少的部分,但是基础牢不牢才是能不能…

idea如何建立web项目???

我们需要用到tomcat,没有下在着小伙伴,可以借鉴这篇博客: 如何正确下载tomcat???_明天更新的博客-CSDN博客 1.建立普通的Java项目。 2.简单编写index.jsp文件 3.添加tomcat 4.运行服务器 5.构建Servlet 最后…

如何优雅做好项目管理?

导言 项目本身无好坏之分,项目管理有做好与做坏之别。在互联网大厂的体制下,想要做坏一个项目很难(可以通过换人、追加资源等方式消除风险),想要做好一个项目不容易,需要团队及PM付出大量心血和精力。在这…

【数据结构】树和二叉树

一、树的概念及结构 1、树的概念 树 是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 有一个特殊的结点&a…

基于C#的消息处理的应用程序 - 开源研究系列文章

今天讲讲基于C#里的基于消息处理的应用程序的一个例子。 我们知道,Windows操作系统的程序是基于消息处理的。也就是说,程序接收到消息代码定义,然后根据消息代码定义去处理对应的操作。前面有一个博文例子( C#程序的启动显示方案(无窗口进程发…

HTTP响应状态码大全:从100到511,全面解析HTTP请求的各种情况

文章目录 前言一、认识响应状态码1. 什么是HTTP响应状态码2. Http响应状态码的作用3. 优化和调试HTTP请求的建议 二、1xx 信息响应1. 认识http信息响应2. 常见的信息响应状态码 三、2xx 成功响应1. 认识HTTP成功响应2. 常见的成功响应状态码 四、3xx 重定向1. 认识http重定向2.…

mysql从传统模式切到GTID模式后启动主从,主从异常报错1236

一 前言 MySQL 的主从复制作为一项高可用特性,用于将主库的数据同步到从库,在维护主从复制数据库集群的时候,作为专职的MySQL DBA,笔者相信大多数人都会遇到“Got fatal error 1236 from master when reading data from binary …

日常BUG——SpringBoot关于父子工程依赖问题

😜作 者:是江迪呀✒️本文关键词:日常BUG、BUG、问题分析☀️每日 一言 :存在错误说明你在进步! 一、问题描述 在父子工程A和B中。A依赖于B,但是A中却无法引入B中的依赖,具体出现的…

全自动模拟量采集软件框架详解

Monitor.Analog采用一种MVVM架构模式,用于将用户界面(View)与业务逻辑(Model)进行分离,并通过ViewModel来进行连接和交互。以下是MVVM框架的介绍: 1. Model(模型)&#x…

【CTF-web】buuctf-[极客大挑战 2019]EasySQL 1(sql注入)

题目链接 根据题目判断出可能需要sql注入,看源码可知数据是通过GET的方式传输的,即放在url的username和password两个参数中。 只要将username输入为1 or 11#,password可以为任何值,即可顺利登录。 需要注意的是url中的井号表示…

【腾讯云 Cloud Studio 实战训练营】在线 IDE 编写 canvas 转换黑白风格头像

关于 Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线IDE,包含代码高亮、自动补全、Gi…

8.深浅拷贝和异常处理

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题: 8.1 浅拷贝 首先浅拷贝和深拷贝只针对引用类型 浅拷贝:拷贝的是地址 常见方法: 1.拷贝对象:Object.assgin() / 展开运算符{…obj} 拷贝对象 2.拷贝数组:Array.prototype.con…

1 树 1.1 树的基本概念 1.1.1 什么是树? 树是n(n > 0)个结点的有限集。当n 0时,称为空树。在任意一颗非空树上应该满足: 有且仅有一个特定的称为根的结点当n>1时,其余结点可分为m(m>0)个互不相…

微信支付报非法的密钥大小: Caused by: java.security.InvalidKeyException: Illegal key size

在Linux环境中出现 java.security.InvalidKeyException: Illegal key size 异常通常是由于Java默认的加密限制引起的。Java默认的加密强度限制了加密算法密钥的最大长度 方式一 1. 找到该目录 /usr/java/jdk1.8.0_121/jre/lib/security 2. 替换local_policy.jar 和 US_export_…

单因素多变量方差分析

多变量方差分析:是对多个独立变量是否受单个或多个因素影响而进行的方差分析。它不仅能够分析多个因素对观测变量的独立影响,更能够分析多个因素的交互作用能否对观测变量产生影响。本章以单因素多变量分析为例,即一个分组变量和多个欲分析的…

怎么开通Tik Tok海外娱乐公会呢?

TikTok作为全球知名的社交媒体平台,吸引了数亿用户的关注和参与。许多公司和个人渴望通过开通TikTok直播公会进入这一领域,以展示自己的创造力和吸引更多粉丝。然而,成为TikTok直播公会并非易事,需要满足一定的门槛和申请找cmxyci…

Kubernetes 调度约束(亲和性、污点、容忍)

目录 一、Pod启动典型创建过程 二、调度流程 三、指定调度节点 1.使用nodeName字段指定调度节点 2.使用nodeSelector指定调度节点 2.1给对应的node节点添加标签 2.2修改为nodeSelector调度方式 3.通过亲和性来指定调度节点 3.1节点亲和性 3.2Pod亲和性与反亲和性 3.2…

【深入探索Docker】:开启容器化时代的技术奇迹

深入探索Docker 深入探索Docker:开启容器化时代的技术奇迹前言1. 容器化:实现快速部署和可移植性2. 虚拟化:提高安全性和可靠性3. 映像:打包应用及依赖项的模板4. 网络管理:连接容器和主机5. 持久化数据:保…