Html 绝对顶部:0底部:0在IE11的表格单元格内不工作

Html 绝对顶部:0底部:0在IE11的表格单元格内不工作,html,css,internet-explorer,internet-explorer-11,Html,Css,Internet Explorer,Internet Explorer 11,根据我之前的问题,我有这个 在小视图中,一列的顶部有两列,在其他视图中,一行中有三列。这正如预期的那样有效。然而,在设计方面,我希望在内容块之间留出空间。为了解决这个问题,我在单元格中创建了一个绝对定位的元素,该元素的大小会相应地填充空间,但会留下一个间隙。这在Chrome上运行得非常好,但是IE11、桌面、Windows8应用程序和WindowsPhone都不能像预期的那样工作 在IE11中,块只会扩展以适应内容(即使绝对块不包含任何内容…),我认为这是因为IE考虑了浏览器添加的自然单元格填充

根据我之前的问题,我有这个

在小视图中,一列的顶部有两列,在其他视图中,一行中有三列。这正如预期的那样有效。然而,在设计方面,我希望在内容块之间留出空间。为了解决这个问题,我在单元格中创建了一个绝对定位的元素,该元素的大小会相应地填充空间,但会留下一个间隙。这在Chrome上运行得非常好,但是IE11、桌面、Windows8应用程序和WindowsPhone都不能像预期的那样工作

在IE11中,块只会扩展以适应内容(即使绝对块不包含任何内容…),我认为这是因为IE考虑了浏览器添加的自然单元格填充,以使单元格具有相同的高度。最重要的是:如果你给块一个设定的高度,并使用
bottom:0
块将粘到单元格的底部

以下是fiddle HTML:

<div class="table">
    <div class="cell"><div class="back"></div>One Line</div>
    <div class="cell"><div class="back"></div>Two<br/>Lines</div>
    <div class="cell"><div class="back"></div>More<br/>Than two<br/>Lines</div>
</div>

我可以使用什么css技巧/技巧使IE的行为模仿Chrome?我宁愿不使用javascript来解决这个问题。

您可以尝试以这种方式使用

.back{min-height: 56px;}

不幸的是,这只是设定了一个最低金额。如果一个比预先确定的数值高,我的问题仍然是一样的。这是动态的吗?让我换一下,让你know@user4749485不幸的是,我不知道哪个内容将是最大的,所以我无法准确地填充该占位符。你找到解决方案了吗?@Ahamed已经有一段时间了,但我想我没有找到。我相信我必须改变我的实现。我也有这个问题。似乎无法解决。我也不知道内容的最大尺寸,所以静态高度对我来说是不可能的。在Chrome和Firefox中运行良好。
.back{min-height: 56px;}