由于机顶盒的终端特性原因，不能用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. 转 PV、TPS、QPS 计算方法

    PV.TPS.QPS是怎么计算出来的?   QPS = req/sec = 请求数/秒 [QPS计算PV和机器的方式] QPS统计方式 [一般使用 http_load 进行统计]QPS = 总请求数 ...

  2. BZOJ4530[Bjoi2014]大融合——LCT维护子树信息

    题目描述 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一条边的负载就是它所在的当前能够 联通的树上路过它的简单路径的数 ...

  3. Enum 扩展

    项目中,用到枚举值,并且增加中英文描述. 一般的[Description]属性,无法满足中英文,所以进行了简单扩展. 继承DescriptionAttribute,增加了英文描述description ...

  4. Java中的split函数拆分后变成null的问题

    对于一些特殊的情况,split拆分后并没有保留全的元素 如下例子: String x ="a,,,,,,"; String []y = x.split(",") ...

  5. [luogu3919]可持久化数组【主席树】

    链接:https://www.luogu.org/problemnew/show/P3919 分析 很明显我们可以用主席树来维护,所谓主席树就是可持久化线段树,能够查询历史版本而且可以实现修改操作,反 ...

  6. HTMLUnit web测试

    httpClient不能动态执行网页中的js,这样无法获取js生成的动态网页.htmlUnit是个解决方法. if you’re considering web application testing ...

  7. POJ 2711 Leapin' Lizards / HDU 2732 Leapin' Lizards / BZOJ 1066 [SCOI2007]蜥蜴（网络流，最大流）

    POJ 2711 Leapin' Lizards / HDU 2732 Leapin' Lizards / BZOJ 1066 [SCOI2007]蜥蜴(网络流,最大流) Description Yo ...

  8. 【POJ3061】Subsequence

    题目大意:给定一个有 N 个正整数的序列,求出此序列满足和大于等于 S 的长度最短连续子序列. #include <cstdio> #include <algorithm> u ...

  9. 外显子分析报错解决方案bin field of BAM record does not equal value computed based on alignment start and end, and length of sequence to which read is aligned

    以下链接给出了解决方案:https://gatkforums.broadinstitute.org/gatk/discussion/4290/sam-bin-field-error-for-the-g ...

  10. MyEclipse2017配置多个tomcat

    一:添加多个tomcat的运行环境 首先,在Window——Preferences 搜索 servers, 在Servers中点Runtime Environments, 点右边的Add,选择我们要添 ...