CSS规则的“语义”：table、table-row、table-cell答案

【问题标题】："Semantics" of CSS rules: table, table-row, table-cellCSS规则的“语义”：table、table-row、table-cell
【发布时间】：2012-08-07 05:30:43
【问题描述】：

我最近经常使用这些属性，尤其是display: table-cell。它在现代浏览器中得到了很好的支持，它对一些网格和对齐内容有很多好处，不需要复杂的标记。但在过去的几天里，我看到人们在谈论这个，因为使用这些属性是一种不好的做法/方法，就像在这个 answer 中一样。

优点（我现在想到的）：

缺点

所以我真的不明白，为什么将它们用于布局会很糟糕。

我想这个问题已经结束了（我可以理解），但也许有人有一个不错的答案——甚至对他们的使用持肯定态度。

【问题讨论】：

这是一种更严格的做事方式，但就其本身而言，使用它并没有什么坏处。
我可以想出一个理由不这样做，原因很明显。您将其设置为的显示选项是“表格单元格”，它可能有朝一日还带有额外的包袱，实际上使它看起来像表格数据。例如网格状外观或类似效果。
@TheZ 一些 HTML 元素具有默认外观。 CSS display 属性是一个非常不同的东西 - 它不应带有额外的包袱。 table、tr等已经默认渲染成网格状，没问题。
@bažmegakapa 如果和语义无关为什么叫table-cell？他们可以称之为任何东西。
@AlexW - 感谢分享。

【解决方案1】：

一个优点：提供表格布局而不使用表格元素。一个负面：对某些用户代理产生负面影响：http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/ 这是“这一切都取决于...”的问题之一。

【讨论】：

【解决方案2】：

我喜欢根据需要设置显示和位置，尽管我几乎总是将任何大型元素设置为position: relative;，这样我可以更轻松地处理他们的孩子。

至于display:table-cell - 它只是改变了它的布局方式。如果您只需要一个整洁的小 4x4 网格，而不是在桌子上编写完整的代码，为什么不使用它呢？它非常简单，非常干净，是编写大（凌乱）表的非常非常简单的替代方案。

我的建议是“如果它没有坏，就不要修复它”。 display: 只会改变物品的显示方式...显示~看图！

我根据需要使用尽可能多的display:，例如菜单可能是:inline-block; 用于媒体查询或:block 用于完整文章，或:table-cell 用于一个部分上的一个漂亮的简单甚至2 列位侧边栏/文章。

【讨论】：

【解决方案3】：

引用自linked answer：

不要忘记 table-cell 不是正确的用法。你不想图像被视为表格单元格，因为表格单元格应该只包含表格数据。只是举起谨慎的旗帜。 坚持语义。

我不会说这么长的：CSS 与语义毫无关系。

【讨论】：

我就是这么想的——这里需要一些备份。谢谢。
实际上 css 提供了必要的技术来充分利用 html 的潜力。如果没有 css，我们仍然会做基于表格的布局，这会影响语义。这只是一个例子。有很多。
@albert 这就是我要说的。 HTML 处理语义，CSS 处理样式。
微格式提供语义。因为它们是 html 属性，如果这完全是 css、hybrid 或你所说的一样的话，idk。
经过深思熟虑，我们通过 css 像访问元素一样访问所说的类；我永远不会调用元素 css。也许我只需要为自己定义更多的互动。我们不都是巨魔。：）我喜欢学习。积极的讨论推动了这一点。