尽管一些网页设计工具为按钮等元素指定了 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 单位，以免继承我的网站的基本字体样式。
首先，我们看看在 font-size 、 height 、 line-height 和 width 使用固定值的情况下，当文字大小增大时会发生什么。在文字大小增大之前，按钮看起来很棒！但文字大小增大后就不那么好看了。
<button style="font-size: 16px; height: 36px; line-height: 18px; width: 82px;"> delete all</button>现在，我们使用相同的代码，并尝试在 line-height 和 padding 中不使用单位，以影响按钮的 height 和 width 。当文字大小加倍时，我们应该不会看到文字被截断。
<button style="font-size: 16px; line-height: 1.125; padding: 8px;"> delete all</button>1111111111111
理解文档中提到的一种技术是 C28：使用 em 单位指定文本容器的大小。根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。
想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。如果文本被设备大小截断，这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险：
在使用技术 C28 时，防止出现这种情况的一种方法是利用 CSS 属性，如 max-width ，但我个人更倾向于使用尽可能少的 CSS 属性（以降低长期维护成本）。与使用 width 和 max-width 相比，我们可能只需使用 padding ，然后让浏览器执行其默认的魔法，使元素适合视口。
本文链接：http://www.28at.com/showinfo-26-24293-0.html不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
下一篇： 数倍数据平滑扩容迁移方案
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号