由于机顶盒的终端特性原因，不能用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注意点的更多相关文章

  1. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  2. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  3. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  4. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  6. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. HTML 父元素与子元素之间的margin-top问题

    问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...

  8. 父元素与子元素之间的margin-top问题(css hack)（转载）

    情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...

  9. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  10. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

随机推荐

  1. LAMP和LNMP去除index.php访问

    使用TP或者Laravel开发的时候,后时候会遇到需要加index.php才能正常访问 LAMP解决方法 1.修改配置 打开配置文件(如:httpd.conf),找到你网站根目录的配置,将AllowO ...

  2. ACdream1187-Rational Number Tree-模拟/找规律

    找到规律模拟就可以了,用DFS模拟很简洁,用循环模拟比较直观(大概吧) 注意输入输出用%llu,1ULL<<64=0!被这几个小问题卡了好久 #include <cstdio> ...

  3. POJ3252-RoundNumbers-排列组合

    当一个数的二进制表示中,0的个数大于或等于1的个数时,叫做RoundNumber.求从S到F两个数(包含)之间的RoundNumber个数. 这类题一般都是先求出0到N的个数,然后两个相减. 由于题目 ...

  4. 2017ACM/ICPC广西邀请赛-重现赛

    HDU 6188 Duizi and Shunzi 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6188 思路: 签到题,以前写的. 实现代码: #inc ...

  5. 自学Zabbix3.10.2-事件通知Notifications upon events-Actions报警配置

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix3.10.2-事件通知Notifications upon events-Acti ...

  6. 【BZOJ2434】【NOI2011】阿狸的打字机（AC自动机，树状数组）

    [BZOJ2434]阿狸的打字机(AC自动机,树状数组) 先写个暴力: 每次打印出字符串后,就插入到\(Trie\)树中 搞完后直接搭\(AC\)自动机 看一看匹配是怎么样的: 每次沿着\(AC\)自 ...

  7. 【ATcoder s8pc_3 F】 寿司

    http://s8pc-3.contest.atcoder.jp/tasks/s8pc_3_f (题目链接) 题意 有一个长度为$N$的数列$A$,初始为$0$.$Q$次操作,每次两个参数$x,y$. ...

  8. hdu 2158 最短区间版大家来找碴(尺取法)

    Problem Description 给定一个序列,有N个整数,数值范围为[0,N).有M个询问,每次询问给定Q个整数,可能出现重复值.要求找出一个最短区间,该区间要包含这Q个整数数值.你能找的出来 ...

  9. AAD Service Principal获取azure user list (Microsoft Graph API)

    本段代码是个通用性很强的sample code,不仅能够操作AAD本身,也能通过Azure Service Principal的授权来访问和控制Azure的订阅资源.(Azure某种程度上能看成是两个 ...

  10. 经典的GDB调试命令

    在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据.print命令的格式是: printprint /是表达式,是你所调试的程 ...