如何在 IE8 及以下版本兼容使用 LESS
LESS 是一种 CSS 预处理器，它可以使 CSS 更加灵活、可读性更高、可维护性更强。然而，对于那些仍在使用 IE8 及以下版本的用户来说，使用 LESS 可能会出现兼容性问题。因此，本文将介绍如何兼容使用 LESS 在 IE8 及以下版本中。以下为具体步骤：
步骤一：配置兼容性
首先需要引入一个 JS 文件：respond.min.js。Respond.js 是一个免费的 JavaScript 库，它使 IE6-IE8 和其他不支持媒体查询的浏览器支持媒体查询，从而允许我们使用 LESS。
在引入的时候，有几个要注意的细节，具体如下：
1.引用时需要放在头部，放在底部有可能会导致样式不生效。
2.在引用 respond.js 之前，需要确保所有 CSS 引用都含有 media 属性。否则，Respond.js 将不会识别这些样式表。
3.同时，因为引用 respond.js 会让 IE 认为样式文件是不同源的，所以需要配置样式文件允许跨域访问。
示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IE8兼容LESS</title>
<!-- 引用respond.js库，放在头部 -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script type="text/javascript">
//通过以下方式声明CORS允许跨域（外域）访问。
//此代码需要在 IIS 服务器上运行。
Response.AppendHeader("Access-Control-Allow-Origin","*");
Response.End();
</script>
<![endif]-->
</head>
<body>
<div class="wrapper">IE8可以看到这句话</div>
</body>
</html>步骤二：编译 LESS
一般情况下，在本地开发环境中使用 LESS 时，我们会使用类似 webstorm、VS 或者 sublime 等编辑器内置的 LESS 编译器来编译 LESS 文件。这些编译器都可以自动完成 LESS 的编译工作。
但是在 IE8 及以下版本中，由于浏览器不支持 LESS，我们需要在服务器端进行 LESS 编译，然后将编译后的 CSS 文件引入到页面中。
为此，我们可以使用一些工具来实现 LESS 编译，比如 Node.js 中的 lessc 或者在 Apache 中设置 mod_lessfuse 等。这里以 lessc 为例，使用命令行编译 LESS 文件。
示例代码：
lessc styles.less styles.css
上面的代码将使用 lessc 编译 styles.less 文件，将编译结果输出到 styles.css 文件中。
步骤三：使用兼容性选择器
在 IE8 及以下版本中，我们需要使用 CSS3 提供的兼容性选择器来解决兼容性问题。其中，兼容性选择器主要有以下几种：
1.星号选择器（* selector）：选择所有元素。
2.id选择器（#id selector）：选择 id 属性为指定值的元素。
3.class 选择器（.class selector）：选择 class 属性为指定值的元素。
4.元素选择器（element selector）：选择指定类型的元素。
5.属性选择器（attribute selector）：选择带有指定属性的元素。
6.伪类选择器（pseudo-class selector）：选择带有指定伪类的元素。
示例代码：
/* 兼容性选择器，IE8 及以下版本生效 */
.selector{
*display: inline-block;
zoom: 1;
/*其他CSS样式*/
}上面的代码中，我们使用星号选择器和 zoom 属性解决了 IE8 及以下版本与 inline-block 样式不兼容的问题。
总结
通过以上三个步骤，我们就可以在 IE8 及以下版本中兼容使用 LESS。虽然这样做会增加一些工作量，但是对于那些需要照顾老版本 IE 用户的网站来说，这是非常必要的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b3a6e7d4982a6eb5265fa