共计 1462 个字符，预计需要花费 4 分钟才能阅读完成。
通过生成堆叠上下文，可以轻松解决此问题，包括使用 isolation: isolate、设置 position 和 z -index 以及 transform 技巧。
在使用 Safari 浏览器查看 HTML 时，即使在父元素中设置了 overflow: hidden 和 border-radius，子元素仍然可能超出 border-radius 的范围而显示的问题。
问题：
尽管在父元素中设置了 overflow: hidden 和 border-radius 以应用圆角样式于子元素，但在桌面版 Safari 或 iOS 上的 Chrome 等浏览器中，子元素仍然可能在 border-radius 的范围之外显示。
例如，通过以下方式将 放在
HTML：
![]()
CSS：
.parent {
overflow: hidden;
border-radius: 50%;
}当然，如果直接在要应用样式的元素上设置 border-radius，则会按预期显示（理所当然）。因此，问题只在设置了 overflow: hidden 和 border-radius 的父元素时才会出现。
我在以下浏览器版本中能够复现这个现象：
-
macOS Safari: 15.4 (17613.1.17.1.13)
-
iOS Chrome: 100.0.4896.85
-
iOS Brave: 1.37 (22.4.6.8)
原因：
直接进入结论，似乎 Safari（准确说是 WebKit）的一个 bug（？）是问题的原因。
在 WebKit Bugzilla 的 Bug 140535 中称其为“仅在非堆叠上下文中发生”。140535 – Border-radius clip of non-stacking composited descendant doesn't work
bugs.webkit.org/show_bug.cgi?id=140535为了验证这一点，如果添加生成堆叠上下文的 CSS 属性，问题将得到解决。
解决方法：
因为问题似乎仅在非堆叠上下文中发生，所以可以通过有意地生成堆叠上下文来避免。具体而言，有以下几种方法可以在不影响外观的情况下生成堆叠上下文：
方法 1
设置 isolation: isolate
.parent {isolation: isolate;}方法 2
设置 position 和 z-index
.parent {position: relative; z-index: 0;}方法 3
设置 transform 文章来源：https://www.toymoban.com/diary/web/757.html
.parent {transform: translateZ(0);
}从本质上来说，“生成堆叠上下文”的意思来说，最直接的可能是方法 A) 中的 isolation: isolate。如果没有其他特殊原因，可能最好选择【方法 1】。 文章来源地址 https://www.toymoban.com/diary/web/757.html
到此这篇关于解决 Safari 以及 iOS 上的其他浏览器子元素不受 border-radius 作用的问题的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！
原文地址:https://www.toymoban.com/diary/web/757.html
如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！
