gpt4 book ai didi

css - 显示 : Table-cell not setting height constantly xbrowser (ie8 table bug)

转载 作者:行者123 更新时间:2023-11-27 22:29:56 24 4
gpt4 key购买 nike

我正在设置一个包含大量动态内容的页面。我在一张 table 里组织这个。一共有三行,每一行都有一个单元格。顶部用作固定标题,因为我已经设置了顶部单元格的高度。底部单元格用作页脚,因为它也有静态高度。表格的总高度设置为 100%,中间的行/单元格被动态内容和表格中的剩余空间填充。下面是一个两行的例子来演示这个问题:

<html>
<body>
<div class="element_container", style="width: 600px; height: 500px;">
<div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
</div>
</div>
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
</div>
</div>
</div>
</div>
</body>
</html>

在 Chrome/Firefox/Safari 中,表格的总高度保持在 500px。在 IE8 中,它变为 540px,就好像第二个单元格的 100% 高度是从表格本身而不是其父行继承的。

有没有办法让表格在浏览器中以相同的方式工作?或者,至少,在 IE8 的表格中获得相同类型的功能?

最佳答案

不确定为什么不使用表格标签就尝试创建表格?这似乎工作正常。

<html>
<body>
<table style="width:600px; height:500px; background:blue;">
<tr>
<td style="height:40px; background: green;">Hi</td>
</tr>
<tr>
<td style="background: red;">Hello</td>
</tr>
</table>
</body>
</html>

关于css - 显示 : Table-cell not setting height constantly xbrowser (ie8 table bug),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4017268/

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