跨浏览器 HTML 布局的正确方法是什么？答案

【问题标题】：What's the correct way for a cross-browser HTML layout?跨浏览器 HTML 布局的正确方法是什么？
【发布时间】：2010-10-13 04:21:02
【问题描述】：

我刚刚阅读了应该支持多种现代浏览器（包括 FireFox 3.X、Safari 3.X 和 IE7+，但不包括 IE6-）的网络产品的代码。 HTML 代码使用 div 而不是 table 来创建类似表格的效果。实际上，div 是这样组织的：

   <div>
         <div>
              <div style="float:left" id="header1">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>
         <div>
              <div style="float:left" id="header2">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>

有一段 onload JavaScript 代码可以读取所有“headerX”元素，计算它们的最大值offsetWidth。然后将最大 offsetWidth 分配给他们每个人。这样，div就可以很好的对齐，就像table一样。

实际上，我认为这不是一个好方法，但有人告诉我，产品是这样设计的，以使其支持跨浏览器，因为 table 在不同的浏览器中表现不同。

我不相信。所以，问题。除了上面提到的方法之外，还有什么更好的方法可以为所有流行的浏览器制作类似表格的布局？

【问题讨论】：

标签： javascript html dom layout css-tables

【解决方案1】：

看起来几乎每个人都误解了你的问题（或者我可能误解了）。

听起来网络产品正在尝试使用 div 显示表格数据，其原因是这是使其跨浏览器兼容的最佳方式。这不仅是错误的，通过将 javascript 引入等式，它们会立即降低它在您的用户之间的兼容性。如果用户禁用了 javascript，则 div 将一团糟。在这种情况下最好使用<table>，因为它实际上在各个浏览器中都能很好地工作，这就是为什么它曾经设计布局如此吸引人的原因。

大多数人在他们的回答中所指的是使用表格制作网站布局的旧罪，我认为您的问题并未真正涵盖。无论如何，这是不合适的，因为<table> 标签在语义上与保存布局内容无关。最好始终保持 HTML 文档的语义。这个网络产品做的是同样的错误，但以相反的方式：他们使用<div> 标签来显示表格数据，而<table> 在那里。

【讨论】：

【解决方案2】：

有人告诉我，该产品是这样设计的，以使其支持跨浏览器，因为表格在不同浏览器中的行为不同。

噗。表格在浏览器中的行为与其他任何功能没有什么不同。

使用 JavaScript 来模拟表格布局而不是仅仅使用表格真的很不合常理。它会比让浏览器更慢更笨重，如果没有启用 JS，它会崩溃，并且它可能无法很好地响应缩放（在某些情况下会破坏 offsetWidth）或百分比宽度舍入错误。

在某些情况下，使用 JavaScript 来增强布局是合适的，因为这些技巧是表格和 CSS 布局都无法单独完成的，但这并不是其中之一。

有没有更好的方式为所有流行的浏览器制作类似表格的布局？

是的，使用一张桌子。 “这个标记是否真的代表一个表格”的语义问题在很大程度上是一个学术问题。（并且您的标记谈论标题，听起来您甚至可能正在使用真正的语义表！）

只要从上到下的阅读顺序合理，避免使用简单的表格进行布局几乎没有实际危害。 “表格本质上是邪恶的”的想法是对大多数网站使用可怕的嵌套、跨区和固定表格创作的时代的反应，导致无法阅读和无法访问标记。

当然，如果您可以将每个页面元素放在一个 div 中并使用 CSS 来定位每个元素的相对位置、页面大小等，那将是理想的选择。但现实情况是 CSS 并没有那么强大，而且有些使用一些保守的表格可以更简单地实现目标。

【讨论】：

【解决方案3】：

我知道这并不能回答您的问题，但请尽量避免使用表格布局，并了解如何编写跨浏览器兼容的 CSS 来定位您的页面内容。

在csszengarden查看 CSS 布局的可能性

【讨论】：

【解决方案4】：

你正在做的叫做 div-soup。阅读 semantic HTML 和 CSS 属性 display。

另外，如果数据是表格的，那么使用表格也没有什么问题。要在不同浏览器中获得相同的布局，您可能需要设置 CSS 属性 border-collapse: collapse 或 HTML 属性 cellspacing="0"

【讨论】：

【解决方案5】：

HTML 代码使用 div 而不是 table 来创建类似表格的效果。

这是一个常见的误解 - 许多人过去使用表格进行布局的旧方式，因此他们实际上使用 table 而不是 div 来表示 div-喜欢的效果。 :)

【讨论】：

【解决方案6】：

我认为这是不可能的。

但是请注意，如果行的高度已知，您可以定义您的表通过第一列 - 第一行，第二行，... 第二栏 - ....

【讨论】：

【解决方案7】：

即使我很长时间以来也对使用表格进行布局也有类似的想法。但后来我发现很多流行的网站都在使用基于 div 的布局。所以我认为这就是现在的做法。您不必从头开始构建一个。网络上有很多可用的 css 框架，可以轻松使用。请在下面找到列表。

http://developer.yahoo.com/yui/
http://code.google.com/p/blueprintcss/

这里有 css 框架列表
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

【讨论】：

【解决方案8】：

这是一个很好的例子，说明有人忽略了避免使用表格进行布局的全部要点。使用表格进行布局的主要问题是，以后在站点范围内更改任何内容都非常困难和乏味。

通过将 CSS 规则放入 HTML 中，他们将表格的不灵活与狡猾和重复的 CSS 结合在一起。最重要的是，他们滥用 javascript 来重新创建表中已经存在的功能。

这个问题没有简单或“正确”的答案。在不了解您的具体情况的情况下，我所能做的就是列出一些基础知识：

代码越少越好。
如果您发现自己尝试使用 css（尤其是 javascript）复制表行为，您可能只想使用表。
代码越少越好。
如果您发现自己将表格嵌套在其他表格中，则可能有更好的方法来实现您的目标。
代码越少越好。
如果您的设计可以大大简化您的代码，请不要害怕稍微改变一下。

事实是没有灵丹妙药。那里有大量资源，但与任何有价值的追求一样，它需要时间和奉献精神。使用隐藏复杂性的工具可能会在短期内有所帮助，但请注意，您不再能够控制在幕后代表您做出的权衡。

几个地方开始：

【讨论】：

【解决方案9】：

我发现 div/table 辩论最好留给其他人来浪费时间。在设计跨浏览器布局时，我发现最有效的理念是将 table 和 div 都视为独特的元素，每个元素在网页上都有自己的位置。如果您发现自己能够有效地使用 div，那就太好了（如果您可以让它们在所有浏览器中正常工作，那么对您来说就更强大了。）但是，对于更复杂的布局，我发现表格也很有用，当您注意指定单元格填充、单元格间距、边框等时。我最近结束了一个项目，我们的最终设计策略使用了一系列 div 元素，每个元素都封装了一个表格设置，以获得我们想要的设计。页面是 http://www.kafuka.org，如果您想知道我的意思。

【讨论】：

我认为这不是一个特别好的例子，因为它都是固定大小的（这可以通过纯 CSS 布局轻松完成）。此外，文本非常小，没有 JavaScript 就看不到任何内容（对可访问性和 SEO 来说很糟糕）。

【解决方案10】：

在很多情况下您必须使用 JavaScript 进行格式化/设计。我现在唯一记得的例外是当用户调整窗口大小时重新格式化页面。

这类事情可以用纯 HTML + CSS 100% 完成。它可能需要 IE6 和移动平台的条件样式表，但到目前为止，我制作的每个网站都有相同的 IE7 和 FF3 样式表，并且可以使用 DIV 而不是表格。您只需要思考、谷歌和即兴创作（按此顺序；）。

但是，我认为如果没有每个表、行和单元格的 DIV 就无法实现这种特殊情况，这意味着您将做与 <table>, <tr> and <td> 几乎相同的事情。在表格中显示表格数据在语义上很好，所以如果你真的需要它作为表格，而不是作为 Web 布局，只需省去麻烦并使用 HTML 表格标记。

【讨论】：

【解决方案11】：

根本没有这样的东西。

每个浏览器都有自己的怪癖。您需要反复与它们斗争并学会解决它们。

说 CSS 布局比表格布局更跨浏览器或更可靠只是盲目。不，不是。相信 CSS 标记比表格标记更语义化和更酷是一个宗教问题，与这两种方法的实际技术方面无关。

【讨论】：