由于机顶盒的终端特性原因，不能用display：hidden去做隐藏，就选择了visibility：hidden。
在这里遇到一个现象：
给父元素设置了hidden，但是里面的子元素依然可见。以为只是盒子特性导致渲染出来和浏览器的不一样。
但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性，发现父元素设置visibility：hidden，里面的子元素也不见了。
比较之前的项目的代码，找到原因了：
父元素设置hidden的同时，给子元素设置了visibility：visible。结果仅仅只是父元素隐藏了，但是子元素依然是可见的。
简单的测试代码记录下：给父元素设置了边框，子元素黄色背景
.con{
width: 200px;
height: 200px;
border: 1px solid #000;
visibility: hidden;
}
.v-1
{
width: 20px;
height: 20px;
background-color: yellow;
float: left;
margin-right: 10px;
visibility: visible;
}
</style>
</head>
<body>
<div class="con">
<div class="v-1"></div>
<div class="v-1"></div>
<div class="v-1"></div>
</div>
效果如图：父元素不可见了，子元素依然可见
这也使我懂得在编程的学习过程中，即使再常见再普通的也可能还会有你不知道的一面，所以学习知识就得学得透彻，解决问题的时候才能发现根本的问题所在！