在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.

句法

Valid <display-legacy> values:

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent to inline flow-root .

inline-table

inline-table value does not have a direct mapping in HTML. It behaves like an HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

It is equivalent to inline table .

inline-flex

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to inline flex .

inline-grid

The element behaves like an inline element and lays out its content according to the grid model.

It is equivalent to inline grid .

范例

In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

HTML

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>
Not a flex item
					

CSS

.container {
  display: inline-flex;
}
					

结果

In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.

.container {
  display: inline flex;
}
					

规范

规范	状态
CSS Display Module Level 3 The definition of 'display-legacy' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support of inline-block

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-block	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 8 完整支持 8 部分支持 6 注意事项 注意事项 Until Internet Explorer 8, inline-block is only for natural inline elements.	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

Support of inline-table

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-table	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 3	IE 完整支持 8	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

Support of inline-flex

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-flex	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 11 完整支持 11 完整支持 8 Alternate Name Alternate Name Uses the non-standard name: -ms-inline-flexbox	Opera 完整支持 16	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 16	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

使用非标名称。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

Support of inline-grid

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-grid	Chrome 完整支持 57	Edge 完整支持 16 完整支持 16 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Firefox 完整支持 52	IE 部分支持 10 Prefixed 注意事项 部分支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Internet Explorer implements an older version of the specification.	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0 注意事项 完整支持 6.0 注意事项 注意事项 Samsung Internet added this earlier than the corresponding Chrome version would indicate.

图例

完整支持

完整支持

部分支持

部分支持

见实现注意事项。

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>

元数据

• 最后修改： Sep 29, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Display
4. 特性

   1. <display-box>
   2. <display-inside>
   3. <display-internal>
   4. <display-legacy>
   5. <display-listitem>
   6. <display-outside>
   7. display