html – Flex CSS属性不适用于IE和Firefox

概述我正在寻找一种解决方案,如何使Flex属性在所有三种浏览器(IE,Firefox和Chrome)上的表组件上运行. 以下代码仅适用于Chrome(即使添加了-ms-和-webkit-前缀)： table { background-color: white;}.child { padding: 5px; margin: 5px; background-color: #eee; 我正在寻找一种解决方案,如何使Flex属性在所有三种浏览器(IE,firefox和Chrome)上的表组件上运行.

以下代码仅适用于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 >  <tbody>    <tr >      <td  align="left">        One      </td>      <td  align="center">        Two.        <br>Lorem ipsum        <br>dolor sit amet        <br>This is a bit longer line      </td>      <td  align="right">        Three      </td>    </tr>  </tbody></table>

请查看小提琴中的代码：
http://jsfiddle.net/ax961ys1/

解决方法 这似乎是由于每个.child元素都在显示：table-cell;默认情况下(预计这些确实是表格单元格！).

在Chrome中,当你在.container上使用flexBox模型时,.child元素会自动转换为display：block;这使FlexBox工作.

在firefox和IE中,.child元素仍然显示为：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(如果它不是块级元素).

草案更进一步说明：

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元素未被阻塞的事实似乎是行为的原因.

要在Chrome,IE和firefox中获得相同的结果：

>添加显示：块;到.child
>为确保.child元素在IE中正确包装,请添加display：block;到桌子和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 >  <tbody>    <tr >      <td  align="left">        One      </td>      <td  align="center">        Two.        <br>Lorem ipsum        <br>dolor sit amet        <br>This is a bit longer line      </td>      <td  align="right">        Three      </td>    </tr>  </tbody></table>

@H_404_72@ 总结

以上是内存溢出为你收集整理的html – Flex CSS属性不适用于IE和Firefox全部内容，希望文章能够帮你解决html – Flex CSS属性不适用于IE和Firefox所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。