隐藏任何 HTML 标签的正确方法是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9425412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the proper way to hide any HTML tag?
提问by Asif
What is Proper CSS for hiding any HTML. Example- Like <div>
tag.
I use to do this:
什么是隐藏任何 HTML 的正确 CSS。示例 - Like<div>
标签。我经常这样做:
div {display:none; visibility:hidden;}
Does the CSS Supports all the major browsers to Hide that div. Especially Does it Support I.E.
CSS 是否支持所有主要浏览器来隐藏该 div。特别是它是否支持IE
回答by Mike Christensen
Use visibility: hidden;
if you still want the element to take up space in the page layout. For example:
使用visibility: hidden;
如果你仍然想要的元素占用空间的页面布局。例如:
Hello
<div style="visibility: hidden; height: 100px;">Hidden</div>
World
You will still see 100px between the two pieces of text, but you will not see the contents within the div.
您仍然会在两段文本之间看到 100px,但您将看不到 div 中的内容。
Using:
使用:
Hello
<div style="display: none; height: 100px;">Hidden</div>
World?????
There will be no space between the two text elements, as the div
will not affect the layout at all.
两个文本元素之间不会有空格,因为它div
根本不会影响布局。
Both are supported in any modern browser you can think of.
您能想到的任何现代浏览器都支持两者。
回答by Jukka K. Korpela
Both display:none
and visibility:hidden
are universally supported by CSS-enabled browsers, so only the general CSS caveats apply. The have different effect: display:none
causes the document to be rendered as if the element were not there at all, whereas visibility:hidden
means that the element will be duly processed when formatting the document, normally occupying some space, but removed from the view as if it were turned completely transparent.
双方display:none
并visibility:hidden
通过支持CSS的浏览器普遍支持,所以只是一般的CSS警告略施。有不同的效果:display:none
导致文档被渲染,好像元素根本不存在,而visibility:hidden
意味着元素将在格式化文档时得到适当处理,通常会占用一些空间,但从视图中删除,就像它被转动一样完全透明。
Which one you use depends on your goal of hiding an element. For example, if you dynamically (with a client-side script) switch off or on some content, then visibility:hidden
can be better as it does not cause a redraw of other content.
您使用哪一个取决于您隐藏元素的目标。例如,如果您动态地(使用客户端脚本)关闭或打开某些内容,那么效果visibility:hidden
会更好,因为它不会导致其他内容的重绘。
Using both is normally pointless, as display:none
makes visibility:hidden
irrelevant (though in the cascade, it might happen that your settings for these properties may be overridden by other style sheets, and then display:none
may lose effect).
同时使用通常是没有意义的,为display:none
使visibility:hidden
不相关的(尽管在级联,它可能发生,你对这些属性设置可能会被其他样式表覆盖,然后display:none
可能失去作用)。
回答by Purag
You don't even need visibility:hidden;
.
你甚至不需要visibility:hidden;
.
div {
display:none;
}
The above should be enough. And it works in all browsers. It pretty much hides the element completely, as in, it will no longer have an influence in page layout.
以上应该够了。它适用于所有浏览器。它几乎完全隐藏了元素,因为它将不再影响页面布局。
回答by Bhavesh Gangani
display : none;
is enough and standard way to do this
display : none;
做到这一点就足够了
回答by Jenny O'Reilly
In HTML5there is a new global attribute called hidden
.
在HTML5 中有一个名为hidden
.
From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden:
来自https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden:
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.
隐藏的全局属性是一个布尔属性,表示该元素尚未或不再相关。例如,它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会渲染带有隐藏属性集的元素。
Beware that hidden
has a semantic meaning compared to display
and visibility
. That is why it is not a CSS attribute, but an HTML attribute.
请注意,hidden
与display
和相比具有语义含义visibility
。这就是为什么它不是 CSS 属性,而是 HTML 属性的原因。