gpt4 book ai didi

html - 为什么这在 IE 10 上不起作用?

转载 作者:行者123 更新时间:2023-11-28 02:00:51 25 4
gpt4 key购买 nike

此示例代码在 IE 10 中无法正常工作(内表未获得剩余空间)。我去掉 .css 和其他元素只是为了突出我的问题。

我想使用内表来获取顶部 50px 线和底部 30px 线之间的所有空间。在另一个文档类型中它可以工作,但我必须在我的项目中使用这个文档类型。

<!DOCTYPE html>

<html style="height: 100%">
<body style="height: 100%">
<table style="height: 100%">
<tr style="height: 50px">
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<table style="height: 100%; background: #f00">
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 30px">
<td>
&nbsp;
</td>
</tr>
</table>
</body>
</html>

最佳答案

实际上这在 IE9 中也不起作用。这不是错误,而是 IE 渲染引擎的预期行为。你的内表没有被拉伸(stretch),因为它忽略了 height:100% .这是因为 DOM 元素必须具有指定为 height 的直接父元素某些单元中的 CSS 属性(height: auto 不算在内)。如果您在 TD 上指定高度(内部 TABLE 的父级),它将起作用。但是你不能指定 height: 100%-50px-30px对于 TD , 所以这个标记不利于你想要实现的布局。

您的布局是一个经典的页眉-主体-页脚,具有固定的页眉和页脚高度以及自动拉伸(stretch)的主体。这是网络中非常流行的布局。有很多方法可以让它跨浏览器工作(IE、Chrome、Firefox、Safari)。我最喜欢的让它跨浏览器工作的选项(包括 IE7):

  • 使用三个 DIV,为页眉和页脚明确指定高度,为正文指定 position:absolute; top:<header-height>; bottom:<foooter-height> .此外,所有三个 DIV 都需要包装在一个绝对定位的容器中。

关于html - 为什么这在 IE 10 上不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14025362/

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