关注点 - 表格布局、iFrame、代码弃用答案

【问题标题】：Concerns - Table layout, iFrames, code deprecation关注点 - 表格布局、iFrame、代码弃用
【发布时间】：2010-10-20 03:47:16
【问题描述】：

我正在处理一个简单的基于表格的布局，该布局使用 iFrame，如下例所示。这段代码在所有现代浏览器中都能很好地呈现。 iFrame 通常充满长数据表，但没有奇怪的行为或剪辑。

我担心的是，它对我来说看起来像是一个非常糟糕的 hack。除了基于表格的布局弊端之外，我是否应该担心 HTML 和 iFrame 标签的所有 width="100%" height="100%" 属性被弃用？

我知道 CSS 可以做大部分（如果不是全部），但我不想使用浮动 hack，而且我无法确定任何适用于所有现代浏览器的东西。

明确地说，我正在寻找关于这个解决方案是否适合未来几年的意见和建议，或者我是否应该继续深入研究 CSS hack。

感谢您的任何反馈。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
 <style type="text/css">
   <!--
    html, body
    {
      height: 100%;
      margin: 0px;
    }
    -->
 </style>
</head>
<body>
   <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
        <td colspan="2"><div align="center">This is the header.</div></td>
    </tr>
    <tr>
        <td height="100%">
            <iFrame src="pane1.php" width="100%" height="100%" frameborder="0"></iframe>
        </td>
        <td height="100%">
            <iFrame src="pane2.php" width="100%" height="100%" frameborder="0"></iframe>
        </td>
    </tr>
    <tr>
        <td colspan="2">This is the footer.</td>
    </tr>
   </table>
</body>
</html>

【问题讨论】：

标签： html css iframe layout html-table

【解决方案1】：

如果您担心弃用，最好转用 css 样式。如果您更舒服，您仍然可以使用表格布局，但我更喜欢浮动 div。

【讨论】：

我有一个使用纯 CSS 运行的版本。不幸的是，左侧 iFrame 有时会无缘无故地在 IE 中消失。我想只要：和 ttp://www.w3.org/TR/html4/loose.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/loose.dtd"> 被支持，跛脚表解决方案可以解决问题。我对没有让 CSS 在 IE 中工作感到懒惰。感谢您的回复！
如果您使用第一个文档类型（不完整 - 基本上与无文档类型相同）与第二个文档类型，您将获得非常不同的结果。带有百分比和溢出的浮点数：自动或溢出：滚动应该给你大致相同的结果，没有表格。
你是对的..有一些不同的结果！ :o) 最初的纯 CSS 解决方案一直运行良好，直到我的客户在 Vista Home Basic 的 IE7 中打开页面。左侧 iFrame 不存在。在其他所有浏览器上，包括 Vista Ultimate 上的 IE7（它也是相同的浏览器版本！）它运行良好。在紧要关头让客户安静下来的唯一方法是快速恢复到跛脚表解决方案。 Bleh.. 感谢您的评论！

【解决方案2】：

在接下来的几年（或几年）内，我认为不会从任何浏览器中删除任何内容。

表格标签是一组有效且需要的标签。没有它，就无法显示表格数据。

人们开始利用它来显示非常复杂的布局，最终无法维护。

没有人会因为你以你现在使用的方式使用桌子而开枪。它超级简单，可以在您开发的同时完成工作，因此只需将其视为一次迭代。迭代开发是好的。一旦你确定了一个基于 CSS 的布局，这里的代码就很简单，可以替换。

【讨论】：

是的，我这个懒惰的程序员同意你的看法。这是一个非常简单的布局，我只是认为如果 IE 在规范中表现得更好一点，我会选择纯 CSS。有了更多的知识，我可能能够隔离错误.. 它是如此随机，我逃回了桌子。 ;)

【解决方案3】：

弃用意味着这些功能将不会出现在 (X)HTML 的未来版本中。到目前为止，所有浏览器都支持旧版本的 HTML，但我自己不会依赖它。

您正在做的所有事情以及更多事情都可以通过 CSS 完成，而无需使用 hack。完成练习将帮助您保持相关技能。您现在拥有的页面需要两个额外的 HTTP 请求才能显示；这是否是一个问题取决于有多少人在请求该页面。

【讨论】：

我同意保持相关技能非常重要。在此应用程序中，iFrame 似乎工作得最好，因为该应用程序指定了工作流。每一面都有通向表格等的网格，它们需要在不刷新整个页面的情况下工作。我会将 iFrame 放在 DIV 中，但是 IE（和仅 IE）中的错误使这非常痛苦，因为左侧 iFrame 有时会无缘无故消失。如果我没有抓住重点，请道歉。

【解决方案4】：

据我所知，标签不存在被弃用的危险。我有一个很好的来源！

见Are IFrames (HTML) obsolete?

【讨论】：