gpt4 book ai didi

html - 相对 div 与父表格单元格重叠

转载 作者:行者123 更新时间:2023-11-28 18:32:09 30 4
gpt4 key购买 nike

我对放置在表格单元格内的 div 有疑问。单元格具有固定的高度和 div 相对于 height:100% 定位。

jsfiddle example

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 和 Firefox 中以相同的方式工作?

最佳答案

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

position: relative 并没有多大意义,border-fix div 似乎是不必要的 - 也导致了问题。表格(以及具有 display: table-cell 等的元素)在 height 方面非常灵活 - 简单的 block 元素可能不是,就像在这种情况下一样。

还有很多多余的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%;
}

关于html - 相对 div 与父表格单元格重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13981313/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com