给父元素与子元素分别设置visibility注意点
由于机顶盒的终端特性原因，不能用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>
效果如图：父元素不可见了，子元素依然可见
这也使我懂得在编程的学习过程中，即使再常见再普通的也可能还会有你不知道的一面，所以学习知识就得学得透彻，解决问题的时候才能发现根本的问题所在！
给父元素与子元素分别设置visibility注意点的更多相关文章
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
- 父元素与子元素之间的margin-top问题(css hack)（转载）
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现：父元素包含子元素，子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
随机推荐
- Maven环境配置及简单使用（二）
Maven环境变量配置 配置Maven前先从官网下载相关版本,Maven下载地址:http://maven.apache.org/download.cgi,笔者使用最新版本apache-maven-3 ...
- webapi返回泛型给easyui
由于之前遇到的easyui调用webapi的问题. 参见 :http://blog.csdn.net/hanjun0612/article/details/51144991 所以就考虑,封装一个泛型用 ...
- hdu 4417 Super Mario （主席树）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 题意: 给你段长为n的序列,有q个询问,每次询问区间[l.r]内有多少个数小于等于k 思路: 之前用 ...
- Mercurial(Hg)基本操作
Mercurial(Hg)基本操作 来源 https://www.cnblogs.com/gb2013/archive/2012/05/18/Mercurial_Basic.html Mercuria ...
- [TJOI2011]构造矩阵
考虑优化贪心,不回溯,对于每一位,你都判一下放0的话后面是否有解,用网络流判是否可以完美匹配就行了. 但这样时间复杂是错的,所以不必每次都重新建图,现在原来的图中看一下该行列是否已经匹配,若没有,则强 ...
- 【BZOJ3202】项链（莫比乌斯反演，Burnside引理）
[BZOJ3202]项链(莫比乌斯反演,Burnside引理) 题面 BZOJ 洛谷 题解 首先读完题目,很明显的感觉就是,分成了两个部分计算. 首先计算本质不同的珠子个数,再计算本质不同的项链个数. ...
- 小trick总结
一个圆上的整点数量不会很多.(Cf AIM TR 5 F) 二分图完美匹配求字典序最小的方案:先一遍匈牙利求出任意一组完美匹配.再跑一遍逐位确定,要求不能修改编号比它小的匹配.(LG 4100) 如果 ...
- centos6.5下修改文件夹权限和用户名用户组
0.说明 Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结. 在命令行使用命令"ll"或 ...
- javascript面向对象精要第一章原始类型和引用类型整理精要
- SparkSQL和DataFrame
SparkSQL和DataFrame SparkSQL简介 Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用.它 ...