These keywords define whether an element generates display boxes at all.
Valid
<display-box>
values:
contents
contents
value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See
Appendix B: Effects of display: contents on Unusual Elements
了解更多细节。
none
visibility
特性代替。
Current implementations in most browsers will remove from the
accessibility tree
any element with a
display
value of
contents
. This will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. This is incorrect behavior according to the
CSSWG specification
.
In this first example, the paragraph with a class of secret is set to
display: none
; the box and any content is now not rendered.
<p>Visible text</p> <p class="secret">Invisible text</p>
p.secret {
display: none;
}
In this example the outer
<div>
has a 2-pixel red border and a width of 300px. However it also has
display: contents
specified therefore this
<div>
will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed.
<div class="outer"> <div>Inner div.</div> </div>
.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
| 规范 | 状态 |
|---|---|
|
CSS Display Module Level 3
The definition of 'display-box' in that specification. |
候选推荐 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contents
|
Chrome
完整支持
65
|
Edge 完整支持 79 |
Firefox
完整支持
37
|
IE 不支持 No |
Opera
完整支持
52
|
Safari 完整支持 11.1 | WebView Android 完整支持 65 |
Chrome Android
完整支持
65
|
Firefox Android 完整支持 57 |
Opera Android
完整支持
47
|
Safari iOS 完整支持 11.3 | Samsung Internet Android 完整支持 9.0 |
Specific behavior of
unusual elements
when
display: contents
is applied to them
|
Chrome 完整支持 58 | Edge 完整支持 79 | Firefox 完整支持 59 | IE 不支持 No | Opera 完整支持 45 | Safari 不支持 No | WebView Android 完整支持 65 | Chrome Android 完整支持 58 | Firefox Android 完整支持 59 | Opera Android 完整支持 43 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 9.0 |
完整支持
不支持
用户必须明确启用此特征。
display