Tailwind CSS 是一款非常实用的 CSS 框架，它提供了很多简洁好用的类，让开发者可以快速地构建出美观且易用的界面。其中，针对字体大小的类名也是非常常用的，例如 text-sm 可以设置字体大小为 14 像素，text-base 可以设置字体大小为 16 像素，而 text-lg 则可以设置字体大小为 18 像素。然而，在 Edge 浏览器中，这些字体大小类名可能会失效，导致无法像其他浏览器一样使用。那么，我们该怎么办呢？
原因分析
在 Tailwind CSS 中，字体大小类名的实现原理是采用了 REM 单位来计算字体大小，比如 text-sm 的实际大小就是 font-size: 0.875rem，相应的，text-base 的大小就是 font-size: 1rem，text-lg 的大小则是 font-size: 1.125rem。这里，REM 单位的计算是以根元素的字体大小为基础的，即 1rem 等于根元素的字体大小。
而在 Edge 浏览器中，我们可能会发现，当根元素的字体大小被设置为小数点开头的像素值时（例如 font-size: 16.5px），导致 REM 单位的计算出现了偏差。由于这个偏差与浏览器容错机制的不同表现，可能会导致一些字体大小类名的失效。
解决方案
针对这个问题，我们可以采用两种方案来解决。一种是使用固定像素值来设置字体大小，另一种则是设置根元素的字体大小为整数像素值。
使用固定像素值
使用固定像素值来设置字体大小的方法非常简单，就是直接在 CSS 文件中手动设置 font-size 属性：
-------- - ---------- ----- - ---------- - ---------- ----- - -------- - ---------- ----- -
这种方法可以解决 Edge 浏览器中字体大小类名失效的问题，并且在所有浏览器中都不会有任何问题。
设置根元素的字体大小
第二种方法是设置根元素的字体大小为整数像素值。在 Tailwind CSS 中，根元素的字体大小默认是 16px，而我们可以通过重写这个属性来解决问题：
---- - ---------- ----- -
通过这个方法，我们可以保持使用 REM 单位来设置字体大小，同时也能够解决 Edge 浏览器中字体大小类名失效的问题。
总结
Tailwind CSS 是一款非常实用的 CSS 框架，可以极大地简化我们的前端开发工作。但是，在使用中我们也可能会遇到一些意外的问题，比如在 Edge 浏览器中字体大小类名失效的问题。这时，我们可以通过采用固定像素值的方法或者设置根元素的字体大小来解决问题。总的来说，这个问题并不是太难解决，我们只需要了解它的根本原因，采用合适的解决方案即可。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b9163aadd4f0e0ff19ca4c