Question

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

A

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

乙

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
 	this.firstName.subscribe(function(newVal){
   	alert('changed into ', newVal);
  });
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

function change(){
    document.getElementById('ln').value ='Mars';
}

在方案A中，div'child'的内容在浏览器中可见。在方案B中，尽管可见性设置为可见

，但在浏览器中看不到div“child”的内容

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

Answer 1

visibility: hidden与display:none一样。如果您不显示父级类或元素，则无法看到子级元素。您无法看到子 div，因为您隐藏了子div的父div。

但最重要的是你可以看到孩子，因为最高孩子和父母都是不包含在其他div中的个人div。我希望你明白。您可以从参考链接中获取更多信息： -

Link for more information

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

1 个答案: