Css 如何重置'；显示'；弹性项的属性

我正试图将基于表和JS的旧布局转换为具有向后兼容性的新Flexbox，方法是为旧浏览器保留表（特别是IE8、IE9和Opera 10+）

问题是没有

display:flex项

来覆盖旧样式的

display:table单元格

我尝试过各种定义，如

display:inherit

，

display:initial

，但没有一个能够将显示定义重置为灵活项

<!-- 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; }

用户名、电子邮件等。
/*CSS表格布局*/
.layout{显示：表格；宽度：100%；}
.layout>.picture{显示：表格单元格；宽度：30%；}
.layout>.details{显示：表格单元格；宽度：自动；}
/*CSS Flexbox-被不支持它的浏览器忽略*/
/*仅举一个例子-应使用所有版本以获得最佳兼容性*/
.layout{display:flex；}
.layout>.picture{display:？；flex:0 1 30%；}
.layout>.details{display:？；flex:1自动；}

无论我在display中为

.details

设置了什么，它都不能作为flex项工作，也不能增加以填充剩余空间

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

我尝试过用谷歌搜索解决方案，但大多数结果只是关于Flexbox的一般性文章；唯一相似的是，这根本不能解决向后兼容性问题

更新1： 这是一个纯Flexbox和Flexbox结合的表格布局。如果调整结果窗口的大小，则纯布局的收缩方式与组合表格和Flexbox的底部布局的收缩方式不同。 注意：在Chrome中，这是正确的，可以在Firefox、IE、Safari等浏览器中试用

更新2：

---

Safari可以正确使用前缀定义

不存在

display:flex-item

，因为一旦在容器元素上设置了

display:flex

，子项将自动成为flex-item

下面是以说明子对象上的

显示：表格单元格

不会影响子对象上flex属性的功能

编辑：对于Firefox和IE，如果在

display:table cell

规则之后添加规则

display:flex

，则子项上的

display:table cell

不会影响子项上flex属性的功能

/*带显示的flex布局：表格回退*/
.布局{
显示：表；/*返回*/
宽度：100%；/*后退*/
显示器：flex；
}
.layout>.picture{
显示：表格单元格；/*fallback*/
宽度：30%；/*后退*/
显示：flex；/*使FF和IE满意*/
弹性：01 30%；
背景：番茄；
}
.layout>.details{
显示：表格单元格；/*fallback*/
宽度：自动；/*fallback*/
显示：flex；/*使FF和IE满意*/
flex:1自动；
背景：水；
}

用户名、电子邮件等。

正如Danield所提到的，flex容器的所有子项（由

display:flex

或

display:inline flex

指定）都是自动生成的flex项。弹性项目没有

显示

属性；相反，您可以将其设置为其他值，具体取决于您希望如何布置flex项的子项。如果浏览器正在识别

display:flex项

，那么他们可能会有一些奇怪的“flexbox”非标准实现，因为这个值在flexbox规范的任何具体版本中都不存在（我不知道如果它存在，它到底会对应什么）

display

的初始值是

inline

，因此

display:initial

相当于

display:inline

。看见您要做的是将元素重置为浏览器给定的默认显示。您需要提前知道该值；对于

div

元素，它是

显示：block

不幸的是，由于明显的原因，这将覆盖所有浏览器中现有的

表格单元格

声明。在这种情况下，如果您需要支持不支持flexbox的浏览器，那么如果表布局已经适用于您，您也可以继续使用它

.child {
  flex-shrink: 0;
}

---

添加flex shrink属性以防止收缩超过其内容

否，这似乎有效，因为在正常情况下，flex项和表格单元格的工作方式相同，但如果进入极端条件（例如小屏幕），flex项开始工作的方式与表格单元格不同。尝试此演示：并使结果窗口过窄-上部布局（纯flexbox）收缩与底部布局（flexbox内的表格单元格）收缩不同。您使用的浏览器是哪一种-对我来说，即使在Chrome中的窄屏幕上，它们看起来也一样。它工作正常，但FF、IE和Safari都被破坏了。（在初始评论中更新）@RadekPech-有趣的是，如果在flex项目的

display:table cell

规则之后添加规则

display:flex

，它似乎也适用于其他浏览器。使用flexbox会有所帮助-浏览器可能希望flex项同时是flex项和内部flexbox，但它会破坏内部布局，因为表格单元格中的项会变成flex项本身。您需要将旧表单元格的内容包装到另一个元素中，以保持其布局不变。不方便，但仍然是最好的解决方案。最后一个演示：您的权利，在正常的页面上设置flex项以阻止或内联正确工作。不幸的是，我的页面布局太混乱了，以至于浏览器太混乱，无法正确布局。我将不得不重新设计整个页面以仅使用flexbox:（。