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

Question

我刚刚阅读了应该支持多种现代浏览器（包括 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 就可以很好地对齐，就像表格一样。

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

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

score 6 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

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

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

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

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

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

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

score 2 · Accepted Answer

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

在csszengarden 了解CSS 布局的可能性

score 2 · Accepted Answer

你在做什么叫做 div-soup。阅读语义 HTML和 CSS 属性display。

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

甚至我对使用表格进行布局也有类似的想法。但后来我发现很多流行的网站都在使用基于 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/

score 0 · Accepted Answer

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

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

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

更少的代码几乎总是更好。
如果您发现自己尝试使用 css（或特别是 javascript）复制表行为，您可能只想使用表。
更少的代码几乎总是更好。
如果您发现自己将表格嵌套在其他表格中，则可能有更好的方法来实现您的目标。
更少的代码几乎总是更好。
如果它可以让你大大简化你的代码，不要害怕改变你的设计。

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

几个地方开始：

score 0 · Accepted Answer

没有这样的事情。

每个浏览器都有自己的怪癖。你需要与他们反复斗争，并学会绕过他们。

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

score 0 · Accepted Answer

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

这是一个常见的误解 - 许多人过去使用表格进行布局的旧方法是使用表格而不是div来实现类似 div 的效果。:)

score 0 · Accepted Answer

我认为这是不可能的。

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

score 0 · Accepted Answer

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

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

11 回答 11

Related

Reference