隐藏 div 中的 iframe - iframe 内容不可见答案

【问题标题】：iframe within hidden div - iframe content not visible隐藏 div 中的 iframe - iframe 内容不可见
【发布时间】：2016-11-25 14:01:12
【问题描述】：

我正在寻找对以下观察到的行为的解释：

一个

    <div id="parent" style="visibility:hidden">
     <div id="child" style="visibility:visible"></div>
    <div>

    <div id="parent" style="visibility:hidden">
     <iframe>
      <div id="child" style="visibility:visible"></div>
     </iframe>
    <div>

在场景 A 中，div 'child' 的内容在浏览器中可见。在场景 B 中，尽管可见性设置为可见，但 div 'child' 的内容在浏览器中不可见

所有样式都使用 Javascript 应用，以上只是对情况的粗略表示。在 Chrome 中测试 51.0.2704.106 m 有人能帮忙解释一下为什么添加一个继承父隐藏可见性值的 iframe 会隐藏子 div 而不改变其可见性值吗？

【问题讨论】：

【解决方案1】：

visibility: hidden 就像display:none。如果您不显示任何 parent 类或元素，您将看不到 children 元素。您看不到 child div，因为您隐藏了子 div 的父 div。

但是顶部你可以看到 child 因为顶部子级和 parent 都是单独的 div 不包含在其他 div 中。我希望你明白。您可以从参考链接中获取更多信息：-

【讨论】：