在前端开发中，我们经常使用 LESS 来编写样式表，它可以让我们更加方便地管理样式，提高开发效率。但是，有时候我们会遇到一个问题，就是 LESS 编译后的样式表在 Safari 浏览器中不兼容，导致页面样式错乱。本文将介绍这个问题的原因以及解决方法。
问题原因
LESS 会将样式表编译成 CSS，但是它编译出来的 CSS 有一些特殊的语法，在某些浏览器中可能会出现兼容性问题。其中，Safari 浏览器对于一些特殊语法的支持不太好，导致编译后的样式表在 Safari 中无法正常显示。
具体来说，就是 LESS 中使用了类似以下代码的语法：
---- - ---------- -------------- ------------------ -------------- -
上面的代码中，我们使用了 transform 属性来旋转 .box 元素，同时为了兼容 Safari 浏览器，我们还添加了 -webkit-transform 属性。但是，编译后的 CSS 中只会保留 transform 属性，而 -webkit-transform 属性会被删除，这就导致了在 Safari 中无法正常显示样式。
解决方法
针对这个问题，我们可以采取以下两种解决方法：
1. 使用 Autoprefixer
Autoprefixer 是一个 PostCSS 插件，它可以自动为 CSS 添加浏览器前缀，从而解决兼容性问题。我们只需要在 LESS 中使用未添加前缀的语法，然后在编译后的 CSS 中使用 Autoprefixer 添加前缀即可。
首先，我们需要安装 Autoprefixer：
--- ------- ------------ ----------- ----------
然后，在项目根目录下新建一个 postcss.config.js 文件，添加以下代码：
-------------- - -
-------- -
-----------------------
-
-接着，在 package.json 文件中添加以下代码：
---------- - ------------ -------- -------------- -- --------------- -
最后，在 LESS 文件中使用未添加前缀的语法，例如：
---- - ---------- -------------- -
运行以下命令编译 LESS 文件：
--- --- ---------
这样，编译后的 CSS 文件中会自动添加浏览器前缀，从而解决兼容性问题。
2. 手动添加前缀
如果你不想使用 Autoprefixer，也可以手动为样式添加浏览器前缀。例如，我们可以将上面的 LESS 代码修改为：
---- - ---------- -------------- ------------------ -------------- --------------- -------------- -------------- -------------- ------------- -------------- -
这样，编译后的 CSS 文件中就会包含浏览器前缀，从而解决兼容性问题。
总结
LESS 编译后的样式表在 Safari 浏览器中不兼容，这是由于 LESS 中的特殊语法在某些浏览器中无法正常显示。我们可以使用 Autoprefixer 自动为 CSS 添加浏览器前缀，或者手动添加前缀来解决兼容性问题。无论使用哪种方法，都可以让我们更加方便地管理样式，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c85e75add4f0e0ff234183