Chr*_*Noe 1121 css visibility
CSS规则visibility:hidden和display:none两个结果中的元素不可见.这些同义词是？
kem*_*002 1410
display:none意味着有问题的标签根本不会出现在页面上(尽管你仍然可以通过dom与它进行交互).其他标签之间不会为其分配空间.
visibility:hidden意味着不同的是display:none,标签不可见,但在页面上为其分配了空间.标记已呈现,它只是在页面上看不到.
例如:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
更换[style-tag-value]用display:none的结果:
test | | test
更换[style-tag-value]用visibility:hidden的结果:
test | | test
小智 220
它们不是同义词.
display:none 从页面的正常流中移除元素,允许其他元素填充.
visibility:hidden 将元素留在页面的正常流中,这样仍然占用空间.
想象一下,你正准备在游乐园里骑车,而且该线路上有人会如此吵闹,以至于安全人员将他们从线路上拽下来.然后排队的每个人都会向前移动一个位置来填补现在的空位.这就像display:none.
与此类似的情况形成鲜明对比,但是在你面前的某个人穿上了一件隐形斗篷.在查看线条时,它看起来似乎有一个空的空间,但人们无法真正填满那个空洞的空间,因为有人还在那里.这就像visibility:hidden.
Kip*_*Kip 100
有一点值得补充,虽然没有被问到,但是有第三种选择可以使对象完全透明.考虑:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.在这种情况下,你得到:
1st link.
2nd link.
3rd link.
已经指出了1和2之间的差异(即,2仍然占用空间).但是,2和3之间存在差异:在情况3中,当鼠标悬停在链接上时鼠标仍然会切换到手,用户仍然可以点击链接,Javascript事件仍会在链接上触发.这通常不是您想要的行为.选择文本时的行为也可能因浏览器而异.
小智 67
在子节点方面有很大的不同.例如:如果您有父div和嵌套子div.所以,如果你这样写:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
在这种情况下,没有一个div可见.但如果你这样写:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
然后子div将可见,而父div将不会显示.
Con*_*oyP 17
它们不是同义词 - display: none从页面流中删除元素,页面的其余部分就像它不存在一样流动.
visibility: hidden 隐藏视图中的元素,但不隐藏页面流,在页面上留出空间.
wcm*_*wcm 15
display: none 完全从页面中删除元素,并且构建页面就像元素根本不存在一样.
Visibility: hidden 即使您无法再看到它,也会留下文档流中的空间.
这可能会也可能不会产生很大的不同,这取决于你在做什么.
Ste*_*ams 11
随着visibility:hidden对象仍占用垂直高度在页面上.随着display:none它完全删除.如果您在图像下方有文字,那么display:none该文本将向上移动以填充图像所在的空间.如果您执行可见性:隐藏文本将保留在同一位置.
display:none将隐藏元素并折叠占用的空间,而visibility:hidden隐藏元素并保留元素空间.display:none也会影响旧版IE和Safari中javascript提供的一些属性.
除了所有其他答案之外,IE8还有一个重要区别:如果您使用display:none并尝试获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际大小).IE8仅返回正确的宽度或高度visibility:hidden.
小智 6
display: none;
它不会在页面上显示,也不占用任何空间.
visibility: hidden;
它隐藏了一个元素,但它仍然会占用与以前相同的空间.该元素将被隐藏,但仍会影响布局.
visibility: hidden保留空间,display: none而不保留空间.
显示无示例:https://www.w3schools.com/css/tryit.asp？filename = trycss_display_none
能见度隐藏示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
显示：无
\n它将从页面的正常流程中删除该元素，以允许其他元素填充。
\n元素根本不会出现在页面上，但我们仍然可以通过 DOM 与它交互。\n其他元素之间不会为其分配空间。
\n可见性：隐藏
\n它将把元素留在页面的正常流程中，以便仍然占用空间。
\n元素不可见，并且在页面上为其分配 Element\xe2\x80\x99s 空间。
\n隐藏元素的其他一些方法
\n使用z 索引
\n#element {\n z-index: -11111;\n}\n将元素移出页面
\n#element {\n position: absolute; \n top: -9999em;\n left: -9999em;\n}\n关于可见性：隐藏和显示：无属性的有趣信息
\nvisibility: hidden并且display: none性能相同，因为它们都会重新触发布局、绘制和合成。但是，opacity: 0其功能相当于visibility: hidden并且不会重新触发布局步骤。
CSS-transition 属性也是我们需要注意的重要事项。因为从 切换到visibility: hidden允许visibility: visible使用 CSS 转换，而从 切换到 则display: none不允许display: block使用。visibility: hidden具有不捕获 JavaScript 事件的额外好处，而opacity: 0捕获事件
小智 5
如果将visibility属性设置为"hidden",则浏览器仍会在页面上占用内容空间,即使它不可见.
但是当我们将对象设置为时"display:none",浏览器不会在页面上为其内容分配空间.
例:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
这里有很多详细的答案，但我认为我应该添加它来解决可访问性，因为存在影响。
display: none;并且visibility: hidden;可能无法被所有屏幕阅读器软件读取。请记住视障用户将会经历什么。
该问题还询问同义词。text-indent: -9999px;是另一个大致相当的。重要的区别text-indent在于它通常由屏幕阅读器阅读。这可能会带来一些不好的体验，因为用户仍然可以通过 Tab 键访问该链接。
对于可访问性，我今天看到使用的是多种样式的组合，以隐藏元素，同时对屏幕阅读器可见。
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
一个很好的做法是创建一个指向内容主体的锚点的“跳到内容”链接。视障用户可能不想在每个页面上收听完整的导航树。使链接在视觉上隐藏。用户只需点击 Tab 即可访问链接。
有关辅助功能和隐藏内容的更多信息，请参阅：
| 归档时间： |
|
| 查看次数： |
542415 次 |
| 最近记录： |