小编Rad*_*ech的帖子

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

我正在尝试通过保留旧浏览器(特别是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)

css css3 tablelayout flexbox

12
推荐指数
2
解决办法
6万
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

tablelayout ×1