overflow:hidden没有在iOS safari上创建新的块格式上下文

在iOS Safari上，当使用overflow:hidden属性时，不会创建新的块格式上下文。

块格式上下文是指一个独立的渲染区域，其中的元素按照一定的规则进行布局和渲染。创建新的块格式上下文可以影响元素的布局和显示效果。

overflow:hidden属性通常用于控制元素的溢出内容的显示方式。当设置为hidden时，超出元素框的内容将被裁剪，并且不会显示滚动条。

在其他浏览器中，当给一个元素设置overflow:hidden属性时，会创建一个新的块格式上下文。这意味着该元素的子元素会相对于该元素进行布局，并且不会影响其他元素的布局。

然而，在iOS Safari上，overflow:hidden属性不会创建新的块格式上下文。这意味着该元素的子元素仍然会相对于其父元素以及其他元素进行布局。这可能会导致一些布局问题，特别是在处理浮动元素时。

解决这个问题的一种方法是使用其他的CSS属性或技巧来创建新的块格式上下文，例如使用display: inline-block或float: left等属性。这样可以确保在iOS Safari上正确地创建新的块格式上下文，并解决布局问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse

相关·内容

CSS深入理解学习笔记之overflow

ios原生滚动回调效果：-webkit-overflow-scrolling:touch; 3、Overflow与块状格式上下文 　　块级格式上下文（BFC）：具体内容可参考BFC（块级格式上下文）...原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在就对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则是body...答：①overflow元素自身作为包含块；　　　　②overflow元素子元素为包含块；　　　　③transform声明当作包含块：ⅰoverflow元素自身transform（仅支持：IE9+/FireFox...）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera）　　overflow失效妙用：　　　　菜单栏固定显示。...锚点：就是标签的ID。　　　　锚点定位：通过锚链定位锚点位置。　　（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。

4.1K5 0

挥别web移动端开发差异和经典坑

web移动端电话号码识别差异在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7 位数字，形如：1234567 带括号及加号的数字...在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置overflow : 设置外部 overflow 为 hidden...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } MDN定义： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...手指按住屏幕上拉，底部多出一块白色区域。安卓无此特性。在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。

2.9K2 0

清除过的浮动

boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。...实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。...这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。...综上所述：在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；在不支持 BFC的浏览器（IE6-7），通过触发 hasLayout 闭合浮动。...方案3、4通过overflow闭合浮动，实际上已经创建了新的块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，闭合浮动只不过是一系列变化中的一个作用而已。

8612 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

然而，在Safari上对iOS(12.4.1)进行测试时，滚动并没有起作用。经过反复试验，当我为子项添加宽度时，滚动起作用了，在iOS(13.3)上运行就没有问题啦。...如下所示： .card { overflow: hidden; border-radius: 7px; } 动画当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显示的隐藏元素上...Overflow的常见问题：在手机上滚动例如，当我们有一个滑动条时，仅仅添加overflow-x是不够的。在Chrome iOS上，我们需要手动滚动和移动内容。看下面的动图： ?...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...下图是使用基于动量的滚动的效果。 ? 内联块元素根据CSS规范：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈在同一行内，允许空格。

4.5K2 0

面试官：对下面的 CSS 题目回答一遍

所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items属性定义项目在交叉轴上如何对齐。...看这一篇就够了块格式化上下文，这么专业的术语，BFC, 哪些方式会创建 BFC 呢？...浮动不会影响到其他BFC种的元素的布局，清除浮动只能清除同一个BFC中在它前面的元素的浮动外边距折叠也只会发生在属于同一BFC的块级元素之间利用 BFC 避免 margin 重叠下面这个例子会发现... 自适应两栏布局每个盒子的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）即使存在浮动也是如此...它的效果和height:1%一样 } 在浮动元素后面加空标签（设clear:both）给没有设置高度的父元素设置overflow:hidden 一个父亲不能被自己浮动的儿子，撑出高度。

1.3K2 0

小技巧！CSS 整块文本溢出省略特性探究

对于上述超出的情况，我们希望对于超出文本长度的整一块 -- 前端工程师，整体被省略。...经过实测，上述方案在 iOS 和 Safari 下，没能生效，表现为这样： ?...（Chrome 对此可能做了一些优化，所以上述非 iOS 和 Safari 的场景是正常的）所以猜测是因为经过了 display: inline-block 的转化后，已经不再是严格意义上的内联元素了...iOS/Safari 下也能完美实现整块的超长打点省略： ?...CodePen Demo -- iOS 下的整块超长溢出打点省略方案值得注意的是，在使用 -webkit-line-clamp 的方案的时候，一定要配合 white-space: normal 允许换行

1.1K1 0

修复一个因为 scrollbar 占据空间导致的 bug

. /> 代码上没有什么问题，不是手动设置的，而且，在我和另一个同事，还有PM的PC上都是OK的： ?...初步判断是，红框位置结算有差异，差异大小大概是17px, 但是这个差异是怎么产生的呢？就去测试小哥的PC上看，注意到一个细节，在我PC上，滚动条是悬浮的： ?...由此判定是：滚动条占据空间引起的bug。 overscroll-y: overlay CSS属性 overflow，定义当一个元素的内容太大而无法适应块级格式化上下文的时候该做什么。...仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。...表现： html { overflow-y: overlay; } 兼容性没有在caniuse上找到这个属性的兼容性，也有人提这个问题： ? 问题场景以及解决办法 1.

3.3K2 0

CSS3文本与字体

（溢出文本的显示 / 隐藏） overflowt: visible / hidden; 3、text-overflow（规定当文本溢出包含元素时发生的事情） text-overflow: clip /...(.ttf)（Windows和Mac的最常见的字体，是一种RAW格式，因此不为网站优化）兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile...Safari4.2+ OpenType (.otf)（被认为是一种原始的字体格式，内置在TureType的基础上，所以也提供了更多的功能）兼容性：FireFox3.5+、Chrome4+、Safari3.1...+、Opera10+、IOS Mobile Safari4.2+ Web Open Font Format (.woff)（Web字体中最佳格式，是开放的TrueType/OpenType的压缩版本...，可以从TrueType创建此格式字体）兼容性：IE4+ SVG (.svg)（基于SVG字体渲染的一种格式）兼容性：Chrome4+、Safari3.1+、Opera10+、IOS Mobile

1.3K3 0

移动端的那些坑

给外层元素加一个overflow:hidden属性即可解决。...当使用-webkit-overflow-scrolling: touch;时，同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况，需要使用如下方案解决...，在iOS下，需要禁止页面中的touchmove事件，在安卓下，需要给html, body元素加上如下CSS：height:100%;overflow:hidden;。...css.sm-no-scroll { height: 100%; overflow: hidden; } 但由于禁掉了touchmove事件，导致iOS下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分...在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了

1.8K3 0

移动端浏览器和微信浏览器上禁止body的滚动条

一般禁止body滚动的做法就是设置overflow:hidden。...但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用，然后我分析了我的写法，就是在body上加了一个class去定义属性，然后改成标签的定位，如body{overflow:hidden;}，这个实现是可以的...再进一步分析，如果要用class去实现没有滚动条，如下代码设置： .index_body { overflow-y: hidden;/*为了兼容普通PC的浏览器*/ height: 100%...; position: fixed; } 这个就是完全的禁止上下滑动，没有滚动条，且在iOS的safari浏览器上完全不能上下滚，但是确发现微信浏览器上可以上下缩动（下面再解决）。...参考：http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置，如果用户在微信浏览器上不能滚动，但是跳出到了iOS的safari浏览器之后，会有很多变数

2.9K1 0

前端面试之CSS重点概念精讲

你能所学到的知识点 ❝ 选择器流、元素盒模型元素超出宽度...处理元素隐藏层叠规则块级格式化上下文 元素居中 flex布局 Chrome支持小于12px 的文字 CSS 优化处理 (6个)...从「定义」上：内联元素的内联特指外在盒子从「表现」上：可以和文字在一行显示幽灵空白节点在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点...，只需要考虑后代元素每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中层叠上下文的创建（3类）由一些CSS属性创建「天生派」「页面根元素天生具有层叠上下文...,很容易出现设置了巨大的z-index值无法覆盖其他元素的问题 ---- 块级格式化上下文Block Formatting Context 块级格式化上下文Block Formatting Context...层叠上下文的创建（3类）由一些CSS属性创建天生派页面根元素天生具有层叠上下文 根层叠上下文 正统派 z-index值为数值的定位元素的传统层叠上下文 扩招派 (CSS3属性) 元素为flex布局元素

2.4K3 0

移动端H5页面开发坑点指南

: hidden; 2.父元素设置为 display: inline-block;等这里两种方法都是通过设置css属性将浮动元素的父元素变成BFC(块级格式化上下文)元素,使子元素高度可以撑开父元素;...属性在IOS及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间问题4:Safari...: touch; overflow-x:auto在iOS有兼容问题，解决方法: .scroll-box { /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */ height...:纠错关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari...00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00 iOS(safari)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效,加上空的

3.1K1 0

了解BFC特性，轻松实现自适应布局

BFC(Block Formatting Context)俗称块级格式上下文,初次看到这词似乎有点不是很理解，通俗解释就是一个独立区域决定了内部元素的排放，以及内部元素与外部元素的相互作用关系正文开始...BFC是什么俗称块级格式上下文，一块独立的区域决定了内部元素的位置排列，以及内部元素与外部元素的作用关系 BFC特点我们先了解下BFC有什么特点 1、垂直方向，相邻BFC的块级元素会产生外边距合并...我给inner-box-2加个样式，用overflow:hidden触发生成一个新的BFC; 现在就变成了这样了没错，盒子模型高度变成了190了,中间的4外边距没有合并了。...由于在4不是虽然不是根元素，但是身上加了overflow:hidden触发4形成一个新的BFC,那么触发BFC还有其他什么方式吗？...更多关于BFC可以参考MDN BFC[1] 总结了解什么是BFC,BFC简称块级格式上下文，它是一块独立的区域影响子元素的排列，相邻区域的BFC边距会产生重合触发BFC条件有，display: flex

6755 0

vue 项目中常见的几个小问题

(1).H5页面在iOS网页中手机号码颜色改变 H5页面在iOS网页中的数字被识别为电话号码,原因在于Safari浏览器的问题:解决该问题只需在head标签中添加如下代码即可解决。... 在Vue上的具体代码位置如图： ? 项目路径 ?...FF730ACF-F192-4548-8961-1C69BE380223.png (1).用webpack后，控制文本显示行数没有用 overflow: hidden; text-overflow...，但是打包后发现不换行了，代码是没有错的，想着可能是打包的问题，最终还是找到了打包后-webkit-box-orient样式会丢失。...上述代码更改为： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp

4723 0

CSS8:到底什么是BFC？

8943 0

BFC（块级格式化上下文）与常见布局方案

普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定...”的块级盒子，都会为他们的内容创建新的BFC（块级格式化上下文）。...box的左边相接触(对于从左往右的格式化，否则相反)。... 我是一个没有设置浮动,也没有触发... 由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。

5573 0

如何不使用 overflow: hidden 实现 overflow: hidden

CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。...控制 overflow: hidden 的方向这源自一个实际的需求，在某个需求当中，要求容器内的内容，在竖直方向上超出容器会被裁剪，而在水平方向上超出容器，则不会被裁剪。类似这样： ?...这样，我们能够在正常布局流中，当前容器大小范围内，画出任意希望 overflow: hidden 的范围。...；它会成为新的格式化上下文(It becomes a new formatting context)，也就是说，这意味着元素外部的布局不会再影响它的子元素；更具体的，可以看看这篇文章 -- CSS...会创建一个 BFC，而clip-path不会，它只是单纯的裁剪兼容性间的差异所以也就是说，CSS 不仅仅只有 overflow: hidden 实现 overflow: hidden，很多情况，可以灵活使用

2.1K1 0

CSS进阶04-块格式化上下文BFC

BFC渲染规则 CSS2.2中规定BFC具有如下特征：在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。...同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。...在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文...下面，我们详细举例说明这两条规则： 3.1 在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。...3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文

6003 0

FLOAT坍塌原理及解决方案

定位方案的三种流普通流：包括对块级框的块格式，对行级框的行格式，对块级框和行级框的相对定位；浮动：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，其它内容可以排在一个浮动的周围...；绝对定位：在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置（包括 absolute, fixed ）。...块格式化上下文 BFC 全称为 Block Formatting Context（块格式化上下文），它是CSS2.1规范定义的页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域...表格标题 display: table-caption overflow不为visible的元素弹性盒 flex boxs (display: flex 或 inline-flex) 一个BFC包含创建该上下文元素的所有子元素...，但不包括创建了新BFC的子元素的内部元素。

4312 0

手机端页面在项目中遇到的一些问题及解决办法

作者：键盘上的眼泪 https://segmentfault.com/a/1190000015178877 1.解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题?...(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch 或者给 body 增加：body {overflow-x: hidden}。...(1) 规范中有规定：如果元素的 transform 值不为 none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1 不只在手机上，电脑上也一样。...除了 fixed 元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。...-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --> <!

3.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云