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就可以像table一样很好地对齐了。

实际上，我认为这不是一个好方法，但我听说该产品的设计方式是为了使其支持跨浏览器，因为table在不同的浏览器中表现不同。

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

Answer 1

看起来几乎每个人都误解了你的问题(或者也许是我误解了)。

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

大多数人在他们的答案中提到的是使用表格制作网站布局的老罪过，我认为你的问题并没有真正涵盖这一点。无论如何，这是不正确的，因为 <table>标签在语义上与保存布局内容无关。最好保留 HTML 文档的语义。这个网络产品正在做的是同样的罪孽，但以相反的方式:他们正在使用 <div>标签显示表格数据，当 <table>就在那里。