我正在寻找一种解决方案,如何使 Flex 属性在所有三种浏览器(IE、Firefox 和 Chrome)的 table
组件上工作。
以下代码仅适用于 Chrome(即使添加了 -ms-
和 -webkit-
前缀):
table {
background-color: white;
}
.child {
padding: 5px;
margin: 5px;
background-color: #eee;
border: 3px solid;
}
.container {
padding: 2px;
background-color: yellow;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.child.one {
color: green;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.child.two {
color: purple;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
flex-shrink: 0;
}
.child.three {
color: red;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
<table style="width:100%">
<tbody>
<tr class="container">
<td class="child one" align="left">
One
</td>
<td class="child two" align="center">
Two.
<br>Lorem ipsum
<br>dolor sit amet
<br>This is a bit longer line
</td>
<td class="child three" align="right">
Three
</td>
</tr>
</tbody>
</table>
请看fiddle中的代码: http://jsfiddle.net/ax961ys1/
最佳答案
这似乎是由于每个 .child
元素在默认情况下都是 display: table-cell;
(预期这些确实是表格单元格!)。
在 Chrome 中,当您在 .container
上使用 flexbox 模型时,.child
元素会自动转换为启用 flexbox 的 display: block;
上类。
在 Firefox 和 IE 中,.child
元素保留为 display: table-cell;
。
CSS Flexible Box Layout Module 的最新 W3C 草案指出:
The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)
flex 元素 ( https://drafts.csswg.org/css-flexbox-1/#flex-items)
这表明应将 flex 元素更改为其 block-level equivalent (如果它还不是 block 级元素)。
草案更进一步指出:
Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.
flex 元素 ( https://drafts.csswg.org/css-flexbox-1/#flex-items)
在这种情况下,这似乎是 Chrome 正在做的事情,但 IE 和 Firefox 不是。匿名表的存在以及 .child
元素未被 block 化的事实似乎是导致该行为的原因。
要在 Chrome、IE 和 Firefox 中获得相同的结果:
- 添加
display: block;
到.child
- 为确保
.child
元素在 IE 中正确包装,将display: block;
添加到table
和tbody
table {
background-color: white;
display: block; /*Required for wrap to work correctly in IE*/
}
tbody {
display: block; /*Required for wrap to work correctly in IE*/
}
.child {
padding: 5px;
margin: 5px;
background-color: #eee;
border: 3px solid;
display: block;
}
.container {
padding: 2px;
background-color: yellow;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.child.one {
color: green;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.child.two {
color: purple;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
flex-shrink: 0;
}
.child.three {
color: red;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
<table style="width:100%">
<tbody>
<tr class="container">
<td class="child one" align="left">
One
</td>
<td class="child two" align="center">
Two.
<br>Lorem ipsum
<br>dolor sit amet
<br>This is a bit longer line
</td>
<td class="child three" align="right">
Three
</td>
</tr>
</tbody>
</table>
关于html - <table> 中的 Flex CSS 属性在 IE 和 Firefox 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35451371/