使用 CSS 无法完成的事情答案

【问题标题】：What can't be done using CSS使用 CSS 无法完成的事情
【发布时间】：2023-03-22 04:19:01
【问题描述】：

我在这个网站上看到了很多提倡使用表格进行设计的答案，因为它不能使用 CSS 和 Divs 来完成......而实际上它可以完成有点巧思。

哪些事情是真正做不到的？

我遇到的唯一一个是在另一个盒子中垂直对齐一个盒子。

*edit：我想我最感兴趣的是使用 CSS2 无法实现的布局

【问题讨论】：

我认为你的问题不够清楚，你一般是在问什么不能单独使用 CSS 或者可以用表格而不是 CSS 来完成？（如果是后者，请阅读我的回答！）
两者，我想，虽然主要是第二个。当有人给你一个设计来实现而你不确定它是否会很棘手或不可能时，意识到什么是无法实现的，这很有用。

标签： html css

【解决方案1】：

表格中的替代行颜色，无需手动（或借助脚本）为每一行分配替代样式。

确定一个元素相对于另一个元素的位置。例如，您不能使用 CSS 来确定一个框在使用同一类的一堆浮动框中的哪个位置。例如，知道一个盒子是浮动的第一个盒子，还是第二个，还是最后一个盒子会很好。

处理寡妇。寡妇是一个悬在段落末尾的单词，即一个单词从段落的最后一行开始。这是印刷设计中的一大难题，但在网络世界中却很难控制。

【讨论】：

可以使用 CSS 3 选择器完成：w3.org/TR/css3-selectors/#nth-child-pseudo
这是可以仅使用表格自动完成的吗？还是只有 Javascript 和手工可以做到这一点？
我添加了一些其他的东西。那css3的东西很好。等不及要发生了。
不太明白第二个例子的意思，但如果你能详细说明的话听起来很有趣
wheresrhys: 有一些浮动框的特殊样式，具体取决于它们的位置。这可能会导致具有浮动的统一列。

【解决方案2】：

图像不能放置在具有对齐属性的单元格的确切中心。这可以通过一些蛮力来完成。

【讨论】：

【解决方案3】：

没有什么是表格可以做而 CSS 做不到的。

似乎有一个普遍的误解，认为 HTML 和 CSS 应该很简单。它不是。如果您发现自己想要使用表格，那么需要改进的是您的 CSS 技能而不是技术（尽管该技术显然有很多可以改进的漏洞）。

【讨论】：

如果不解决描述反例的其他答案，您的答案将毫无价值。
这个答案应该从没有尝试为企业网站进行复杂专业设计的人那里听到。 CSS 远离。
@Mastermind 我是专业人士。我已经建立了几个完全使用 CSS 的大型网站。我不知道什么是“企业”网站。总有一天你会学到的。
@Iraimbilanja 我同意你的观点，但很多答案都没有给出表格可以解决的例子。
很想知道谁赞成这个以及为什么。可惜点赞？抱歉，但这个答案值得每个人都投反对票，然后再投一些。

【解决方案4】：

这个问题的答案取决于很多事情：

您需要向后兼容到什么程度？包含 IE6 会降低纯 CSS 的容量；和
您的网站有多少是固定宽度和/或固定高度的。在可变宽度和/或高度的情况下，CSS 中的某些事情即使不是不可能也变得困难。

并排内容是 CSS 的一个问题。您可以为此使用浮动，但如果宽度总和超过容器的宽度，尾端浮动将下降到下方。表格在这方面更有能力，因为它们会在可能的情况下挤压列以使内容适合，并且永远不会将单元格拆分到新行中。

您提到的垂直居中。在纯 CSS 中，它与表格无关，而且很难或不可能（取决于兼容性以及容器和项目的固定或可变高度）。

您可能还指悬停内容。 IE6 仅支持锚点上的 :hover 伪元素。该浏览器需要 Javascript 才能实现 :hover-like 行为。

基本上，如果你需要做的事情可以用纯 CSS 相当简单地完成，那就去做吧。如果没有，尽管所有的反桌子狂热者（而且他们是狂热者）都惊恐地跳上跳下，但如果你不得不使用桌子，不要感到难过。

如果您想要一个相对简单的示例，请查看Can you do this HTML layout without using tables?。这是一个概念上简单的布局问题，对于表格来说是微不足道的，还没有人发布满足纯 CSS 要求的解决方案。

【讨论】：

我认为应该反过来考虑：如果一个相对微不足道的设计功能需要表格来使其工作，那么稍微改变设计。您的大多数用户甚至都不会注意到。但是，如果您使用表格，那么一小部分用户（屏幕阅读器用户）会感到困惑。
我不同意。争论是“表格用于内容而不是布局”。不幸的是，CSS 的缺陷和它在浏览器中的支持并没有完全实现这一点，因此有利于 CSS 进行布局，但如果这一切都变得太难了，请不要试图避免使用表格。
如果您的网站想要吸引视障用户（大约 9% 的用户），那么绝对有理由排除使用表格进行布局，因为这会让他们无法使用您的网站。使用表格，除了对 VI 用户不公平外，还会疏远潜在客户，从而让您付出代价。
不确定是否诚实。几乎不可能找到可靠的统计数据。刚刚发现在少数几个网站上提到了 9%。

【解决方案5】：

听起来很明显，但你不能用 CSS 改变内容，它只能用于样式。

【讨论】：

这是一个样式表。这就是 HTML 的用途。你也可以输入内容w3schools.com/Css/pr_gen_content.asp
从技术上讲，您可以使用 :after 伪元素插入图像或文本。您没有更改 DOM 树，但它的行为与您所做的一样。如果我错了，请纠正我。
您可以使用带有伪元素的内容来改变页面上的内容，但您改变的是外观，而不是内容。

【解决方案6】：

多列中的浮动元素，其中每个单元格中的文本可以扩展元素的高度，但如果发生这种情况，必须将下面的整行向下推。

 ---   ---   --- 
|AAA| |BBB| |CCC|
 ---   ---   --- 
 ---   ---   --- 
|AAA| |BBB| |CCC|
|   | |BBB| |   |
 ---   ---   --- 
 ---   ---   ---
|AAA| |BBB| |CCC|
 ---   ---   ---

【讨论】：

+1 关于这里唯一一个真正是表格做而 CSS 没有做的例子。当然，CSS3 改变了这一点……
根据您的盒子的样式，这可以使用清除 div 和假列技术来实现...我认为
是的，但不是任何数量的列或样式，如表格可以轻松做到。
这可以通过 CSS2 的 display:table 和朋友来完成。哦，你用的是IE6还是IE7？现在你有两个问题;)

【解决方案7】：

"...实际上可以做到有点巧思。”

“避免对独创性的需求”在 CSS 中很难做到。

;)

【讨论】：

我不相信为了搞笑而点赞，但如果有“让我发笑”按钮，我会点击它
我认为这是一个完全正确的观点。虽然我不是网站开发人员，但即使是微不足道的事情也需要大量的思考和 css 实验。表格往往更宽容。

【解决方案8】：

表格应该用于表格数据！我们应该始终尝试为要标记的给定内容使用正确的 HTML。所以不仅仅是 div 的（span、ul、li、dl、strong、em ... 等）这确保内容不仅看起来正确而且正确（出于 SEO 和可访问性的原因）

通过不使用表格，我们可以将内容从一种外观转换为另一种外观，而无需更改 HTML，请参阅Zen Garden

目前虽然使用当前的浏览器可以完成类似 CSS 表格的布局，但很棘手。有一些技术可以解决许多问题，通过global wrappers 使用背景图像或positioning fixes 来解决这些问题，这两篇文章还提到了使用 Javascript 逐步增强页面以获取您可能需要的其他类需要。

当然，如果从 CMS 进行处理，您也可以使用一些 XSL 作为中间件来帮助进行格式化。

【讨论】：

是的，但表格更难看起来正确，归根结底，这是 HTML 的决定性因素。
ZenGarden 归根结底是原始的。任何或多或少复杂的设计都需要重新调整所有 div 以及样式表。
但是 ZenGraden 和 CSS 标记背后的原则是它们是抽象的，如果你认为你绝对和相对地配置事物，则并不总是需要重新洗牌，例如从底部移动导航SEO / 可访问性渲染顶部的 HTML

【解决方案9】：

块或文本的垂直对齐方式。
拥有可拉伸到内容宽度的弹性容器。
具有多个具有相同结构的“行”，其中“单元”在所有行中的宽度同步。
让多个“列”同步它们的高度（直到最长文本块的长度）。

这些是相当基本的设计师需求，甚至出现在基本的设计概念中。

如果考虑到 IE8，单元格/列的问题也许可以用 CSS 解决，但要广泛普及还需要很多年（即使 2-3 年的 IE7 也没有达到预期的市场份额）。

至于“匠心”，在软件开发中可不是什么好东西。几个月后您的同事和您自己将无法理解的技巧通常会构建每个人都害怕接触或决心完全重构/重写的代码库。

记住 KISS 原则。执行此操作的方法越简单，它的工作就越可靠。

【讨论】：

弹性容器可以通过浮动它们并指定宽度来实现：auto，但如果内容是文本，它不会包裹文本，直到盒子达到其最大宽度，所以有弹性容器彼此相邻，因此不可能完全填充宽度
我认为您的第三个和第四个示例是可能的，但只能通过添加额外的 div 并使用人造列技术。行的问题比表格要复杂得多，但列也不错
另外，我同意独创性的观点，确实 a) CSS2，尤其是跨浏览器问题，需要太多。 b) 与其他代码文件相比，注释 CSS 的传统似乎要少得多

【解决方案10】：

Rory，我认为你是完全正确的。垂直对齐可以通过 line-height 来完成，并且在 CSS 中创建布局并不难。事实上，当使用绝对/相对定位和浮动时，它要灵活得多。

仍在使用表格进行设计的人应该真正了解当前的标准。

继续话题，随着 CSS3 的出现，很难想到 CSS 不能做的事情。图像处理、内容处理、高级选择器，这一切都将成为可能。但是，如果我不得不说出一件事，那就是使用 CSS，您不能（也不会）能够旋转元素。

【讨论】：

块的垂直对齐不能用 line-height 完成 - 相信我，我已经尝试过了，如果你查看有关堆栈溢出的各种其他问题，那么还有很多其他人尝试过但失败了.当 CSS3 得到广泛支持时，它会非常酷！

【解决方案11】：

我无法使用透明度在所有页面上创建可变高度的文本区域。我相信这是不可能的。我最终只是编写了一个快速的 javascript 函数来在页面加载后重置高度，以使布局正常工作。请参阅 http://peterchristopher.com 了解我所说的文本区域透明度的含义。

【讨论】：