绝对顶部：0 底部：0 在 IE11 的表格单元中不起作用

Posted 2023-03-06

【中文标题】绝对顶部：0 底部：0 在 IE11 的表格单元中不起作用

【英文标题】：Absolute top:0 bottom:0 not working inside table-cell in IE11

【发布时间】：2015-07-21 13:22:06

【问题描述】：

基于我以前的问题，我有这个fiddle

它在小视图中在一列顶部有两列，在其他视图中连续 3 列。这按预期工作。然而，对于设计方面，我想要内容块之间的空间。为了解决这个问题，我在单元格内制作了一个绝对定位的元素，该元素将相应地调整大小以填充空间，但留下一个间隙。这在 Chrome 中效果很好，但是 IE11、桌面、Windows 8 应用程序和 Windows Phone 都无法按预期工作。

在 IE11 中，块只会扩展以适应内容（即使绝对块不包含任何内容......）我认为这是因为 IE 考虑了浏览器添加的自然单元格填充以制作单元格相同的高度。踢球者是：如果你给块一个设定的高度，并使用bottom:0，块将直接粘在单元格的底部。

这是小提琴的 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：

.table 
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

.cell 
    display: table-cell;
    border: 1px solid red;
    position:relative;
    padding:0px 10px;

.back 
    position:absolute;
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    background:#777;
    z-index:-10;

.cell:first-child .back 
    right:5px;

.cell:nth-child(2) .back 
    left:5px;

@media (max-width: 768px) 
    .cell:last-child 
        display: table-caption;
        caption-side: bottom;
    


@media (min-width:769px)
    .cell:last-child .back 
        left:5px;
    
    .cell:nth-child(2) .back 
        right:5px;
    

我可以使用哪些 css hacks/trick 来使 IE 的行为模仿 Chrome 的行为？我宁愿不用javascript来解决这个问题。

【问题讨论】：

@user4749485 不幸的是，我不知道哪个内容最大，所以我无法准确填充该占位符。

你找到解决办法了吗？

@Ahamed 已经有一段时间了，但我想我没有。我相信我必须改变我的实现方式。

我也遇到了这个问题。似乎无法解决。我也不知道内容的最大尺寸，所以静态高度对我来说是不可能的。在 Chrome 和 Firefox 中运行良好。

【参考方案1】：

你可以试试这样使用

.backmin-height: 56px;

【讨论】：

不幸的是，这只是设置了最低金额。如果一个高于预定义的数量，我的问题仍然是一样的。

那是动态的吗？让我改一下，让你知道