我正在尝试通过保留旧浏览器(特别是IE8,IE9和Opera 10+)的表格,将基于表格和JS的旧布局转换为具有向后兼容性的新Flexbox.
问题是没有display:flex-item覆盖旧的风格display:table-cell.
我尝试了各种各样的定义display:inherit,display:initial但没有一个能够重置显示定义以正常工作作为flex项.
<!-- 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 …Run Code Online (Sandbox Code Playgroud)