不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验

为什么

尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.

标准要求：

除了字幕和文本图片外，文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。

如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。

还不信服？

你可能会想："但当我把浏览器放大到 200% 时，按钮文本看起来很好！"这可能是这个标准的一个常见误解。我以前不知道浏览器缩放只是问题的一部分！

深入了解 SC 1.4.4: Resize Text ，它指出我们（“作者”）必须处理用户只增加文本大小的情况，因为他们的浏览器（或其他“用户代理”）可能没有缩放功能。

文档说：

如果用户代理不提供缩放功能，但允许用户更改文字大小，那么作者有责任确保在调整文字大小时内容仍然可用。

这个标准也是为什么 CSS font-size 属性使用 rem单位，而 line-height 属性不使用单位的一个原因。在没有浏览器缩放等机制的情况下，文字大小必须可以调整到 200%。

但怎么办？处理起来比你想象的更容易！

代码演示

注意：为了这些演示的目的，请假装我们使用 rem 单位设置 font-size。我在这里使用 px 单位，以免继承我的网站的基本字体样式。

演示 1

首先，我们看看在 font-size 、 height 、 line-height 和 width 使用固定值的情况下，当文字大小增大时会发生什么。在文字大小增大之前，按钮看起来很棒！但文字大小增大后就不那么好看了。

<button style="font-size: 16px; height: 36px; line-height: 18px; width: 82px;">
  delete all
</button>

演示 2

现在，我们使用相同的代码，并尝试在 line-height 和 padding 中不使用单位，以影响按钮的 height 和 width 。当文字大小加倍时，我们应该不会看到文字被截断。

<button style="font-size: 16px; line-height: 1.125; padding: 8px;">
  delete all
</button>

另一种方法

理解文档中提到的一种技术是 C28：使用 em 单位指定文本容器的大小。根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。

想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。如果文本被设备大小截断，这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险：

• SC 1.4.4 调整文本大小
• SC 1.4.10 重排

在使用技术 C28 时，防止出现这种情况的一种方法是利用 CSS 属性，如 max-width ，但我个人更倾向于使用尽可能少的 CSS 属性（以降低长期维护成本）。与使用 width 和 max-width 相比，我们可能只需使用 padding ，然后让浏览器执行其默认的魔法，使元素适合视口。

交流

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。