relative div与父表格单元格重叠

我有一个放在表格单元格内的div的问题。单元具有固定的高度和div相对于高度的位置：100％。relative div与父表格单元格重叠

td { 
    height:80px; 
    width: 80px; 
} 
.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
    position:relative; 
}

enter image description here

的问题，当我改变div的内容和DIV高度比单元格高度更大的显示。行为IE和FF低于：

enter image description here

而下图说明了Chrome浏览器的行为：

enter image description here

Chrome的行为正是我需要的，我怎么能使其工作同样的方式在IE和FF？

来源

2012-12-20 user947668

-1

Firefox为控制单元格行为提供了一些可能性，但是如果您必须支持IE7，那么您运气不好。 display: table-cell;在IE7或更低版本中不起作用。

来源

2012-12-20 22:13:38

这应该是一个评论，它甚至没有试图回答这个问题。 – kapa

仍然是一种新的张贴在这里。谢谢你的提示！ –

我删除了不必要的标记和CSS，现在它似乎工作正常。

position: relative没有什么意义，border-fix div似乎是不必要的 - 也导致了问题。表格（和display: table-cell之类的元素）在涉及到height时非常灵活 - 简单的块元素可能不会像在这种情况下那样。

还有很多冗余的CSS，请看the Fiddle。经过Chrome，FF，IE9测试。

因此，这将是标记：

<td class="border"> 
    <div class="cell_wrapper"> 
     <div class="cell_text"> 
      line-1 
     </div> 
    </div> 
</td>

和相关的CSS：

#mytable td { 
    height:80px; 
    width: 80px; 
    text-align: center; 
} 

.cell_wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
}

来源

2012-12-20 22:25:23 kapa

感谢您的帮助。不幸的是div放在相邻的单元格中还有另一个问题：http://jsfiddle.net/PHBfd/12/。它的高度不会改变。 – user947668

@ user947668嗯，这很不好...表格单元格的问题是你不能使用'position：relative'＆stretch通过定位绝对的技巧。而且，在某些浏览器中，“高度：100％”似乎与最初设置的“高度”有关（正确地说，我假设）。也许你别无选择，只能重新思考这件事。 – kapa

relative div与父表格单元格重叠

回答

相关问题