Flexbox的桌子和绝对定位在IE 10，11不工作或边缘

在Firefox和铬的元素定位到细胞的底部工作完全正常。Flexbox的桌子和绝对定位在IE 10，11不工作或边缘

然而，在IE 10，11，EDGE它似乎开始从单元格中的最后一块文本的绝对位置。我的假设是它错误地计算了高度。

是否有解决方案或workround这个问题？

<div style="display: flex"> 
 
    <div style="flex:1"> 
 
    <table style="width:100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td> 
 
    <td style="vertical-align:top; position: relative;">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr> 
 
    </table></div> 
 
</div>

来源

2016-02-22 FreshRob

解决的办法是强制表和细胞具有100％的高度。

这则固定在相对的问题在IE中实现Flexbox内

<div style="display: flex"> 
 
    <div style="flex:1"> 
 
    <table style="width:100%; height: 100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td> 
 
    <td style="vertical-align:top; position: relative; height: 100%">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr> 
 
    </table></div> 
 
</div>

来源

2016-03-01 10:05:06 FreshRob

你应该考虑的第一件事情是，你正在使用的表格元素都无关Flexbox的。它们不受flex属性的影响并保留其standard CSS table properties。

当您创建Flex容器（通过应用display: flex或display: inline-flex的元素），将子元素变得弯曲的物品。儿童以外的柔性容器的后代不会变成柔性物品，因此不接受柔性属性。

在您的代码中，最外面的div是flex容器，使其子–嵌套div –为flex项目。这个弹性项目的任何后代都不是弹性相关的。

另一个考虑是Flexbox的默认设置：当您创建Flex容器，几个默认的规则生效。其中一个规则是align-items: stretch，它告诉flex项目沿横轴扩展容器的全长。

如果你申请display: flex到表行（tr），此表单元格（td）转换成弯曲的物品自动伸展全高和... 您的布局现在工作的跨浏览器。

添加到您的代码：

tr { display: flex; }

DEMO

IE10支持Flexbox的规范的旧版本，并要求供应商前缀。对于浏览器的兼容性数据看我的答案在这里：https://stackoverflow.com/a/35137869/3597276

来源

2016-02-22 18:40:57

感谢您清除这件事，当谈到了flexbox和它是如何，不影响子元素。添加显示器flex的问题现在是表行和列'失去了默认表功能，该功能根据内部内容缩放列的宽度。我已经更新了片段以增加宽度：100％ – FreshRob

Flexbox的桌子和绝对定位在IE 10，11不工作或边缘

回答

相关问题