css - 如何重置 flex-item 的 'display' 属性

Question

我正在尝试通过为旧浏览器(特别是 IE8、IE9 和 Opera 10+)保留表格，将基于表格和 JS 的旧布局转换为具有向后兼容性的新 Flexbox。

问题是没有 display:flex-item 来覆盖 display:table-cell 的旧样式。

我已经尝试过各种定义，如 display:inherit、display:initial，但没有一个能够重置显示定义以作为 flex-item 正常工作。

<!-- HTML user list -->
<div class="userDetails layout">
    <div class="picture"><img src="..."></div>
    <div class="details">username, email, etc.</div>
</div>

/* CSS Table Layout */
.layout { display: table; width: 100%; }
.layout > .picture { display: table-cell; width: 30%; }
.layout > .details { display: table-cell; width: auto; }

/* CSS Flexbox - ignored by browsers that does not support it */
/* just an example - should use all versions for best compatibility */
.layout { display: flex; }
.layout > .picture { display: ???; flex: 0 1 30%; }
.layout > .details { display: ???; flex: 1 1 auto; }

无论我在显示中为 .details 设置什么，它都不会作为 flex-item 工作并且不会增长以填充剩余空间。

知道如何在不使用 JS 检测浏览器版本和切换样式的情况下覆盖它吗？

我尝试在谷歌上搜索解决方案，但大多数结果只是关于 Flexbox 的一般文章；唯一相似的是 this test这根本无法解决向后兼容性问题。

更新 1:这是 JSFiddle demo纯 Flexbox 和 Flexbox 结合表格布局。如果调整结果窗口的大小，纯布局的收缩方式与结合了表格和 Flexbox 的底部布局不同。注意:在 Chrome 中这可以正常工作，请在 Firefox、IE、Safari 等中尝试。

更新 2:Safari 使用前缀定义可以正常工作... updated JSFiddle demo

Answer 1

正如 Danield 所提到的，flex 容器(由 display: flex 或 display: inline-flex 指定)的所有子项都是自动生成的 flex 元素。 flex 元素没有 display 属性；相反，您可以将其设置为其他值，具体取决于您希望 flex 元素的子项 的布局方式。如果浏览器识别出 display: flex-item，那么它们可能有一些奇怪的非标准实现的“flexbox”，因为这个值从未存在于 Flexbox 规范的任何化身中(我也没有想想如果它确实对应于什么)。

display的初始值为inline，所以display: initial等价于display:inline。参见 this answer .您要做的是将元素重置为浏览器提供的默认 display 。您需要提前知道这个值；对于 div 元素，它是 display: block。

不幸的是，由于显而易见的原因，这将覆盖所有浏览器中现有的 table-cell 声明。在这种情况下，如果您需要支持不支持 flexbox 的浏览器，您不妨坚持使用表格布局(如果它已经适合您)。