求助：仅修改CSS解决iPhone浏览器visibility父子元素显示异常

嘿，这个问题我之前也碰到过！iOS上的Safari（包括iOS版Chrome，毕竟它用的是Safari的WebKit内核）对visibility属性的处理和桌面端浏览器不一样——当父元素设了visibility:hidden，子元素的visibility:visible会直接被忽略，根本不会生效。下面给你几个仅修改CSS就能解决的方案：

方法一：用绝对定位让子元素脱离父元素渲染上下文 #

给子元素加上position:absolute，让它跳出父元素的渲染容器，这样父元素的visibility:hidden就影响不到它了。修改后的CSS如下：

#parent-div {
  visibility: hidden;
}
#inner-div {
  visibility: visible;
  position: absolute;
}

⚠️ 注意：如果父元素原本是相对定位的，可能需要微调子元素的top/left等值，避免布局错位。

方法二：用opacity替代visibility（按需选择） #

如果父元素不需要保留占位空间（其实visibility:hidden和opacity:0都会保留空间），可以用opacity来实现：父元素设opacity:0，子元素设opacity:1，因为opacity的继承是可以被子元素覆盖的。CSS代码如下：

#parent-div {
  opacity: 0;
}
#inner-div {
  opacity: 1;
  position: relative; /* 确保子元素的opacity独立生效 */
}

⚠️ 小提醒：opacity:0的元素依然会触发点击等交互事件，如果你不需要的话，可能还要加pointer-events:none给父元素，同时给子元素加pointer-events:auto。

补充说明 #

为什么iOS端会有这个差异？其实是WebKit内核在移动端的渲染逻辑导致的：父元素设visibility:hidden后，整个渲染容器会被标记为不可见，子元素的visible无法突破这个容器的限制；而桌面端的Chrome/Firefox允许子元素覆盖父元素的visibility设置，所以表现不同。

内容的提问来源于stack exchange，提问作者Nghi Ho