LESS 是一种 CSS 预处理器，它可以让我们使用类似编程语言的语法来编写样式，从而提高样式的可维护性和复用性。不过，在使用 LESS 的过程中，我们可能会遇到一个问题，那就是 IE9 特定嵌套语法导致的错误。本文将介绍这个问题的原因和解决方法，帮助读者避免在使用 LESS 时遇到这种错误。
问题的原因
在 LESS 中，我们可以使用嵌套语法来组织样式，例如：
---------- -
------ -----
------- -----
------- -
---------- -----
-
-------- -
---------- -----
-
-这段代码定义了一个 .container 类，它包含了一个 .header 类和一个 .content 类。在编译成 CSS 后，它的样式规则会被展开为：
---------- - ------ ----- ------- ----- - ---------- ------- - ---------- ----- - ---------- -------- - ---------- ----- -
这个展开后的 CSS 规则在大多数浏览器中都可以正常工作，但是在 IE9 中，它会出现问题。具体来说，IE9 会把 .header 和 .content 当做一个选择器来处理，从而导致样式不生效。例如，上面的 LESS 代码在 IE9 中编译成的 CSS 规则会变成：
---------- - ------ ----- ------- ----- - ---------- ------- -------- - ---------- ----- -
这样，.header 和 .content 就被当做了一个选择器，它们之间有一个空格，表示 .content 是 .header 的后代元素。这显然不是我们想要的结果。
解决方法
为了避免这个问题，我们需要使用 LESS 中的 IE9 特定嵌套语法。这种语法可以让我们在编译成 CSS 时，针对 IE9 使用不同的样式规则。具体来说，我们可以像下面这样写：
---------- -
------ -----
------- -----
------- -
---------- -----
------------- ------- -----
-
-------- -
---------- -----
-
-这个代码中，我们使用了 &:extend(.ie9 .header all) 这个语法。它的含义是，对于 IE9，把当前选择器和 .ie9 .header 这个选择器合并起来，并把样式应用到它们的共同祖先元素上。这样，我们就可以避免 IE9 把 .header 和 .content 当做一个选择器来处理了。
注意，我们还需要在 HTML 中添加一个 .ie9 的类，以便 LESS 编译器能够识别出 IE9 特定的样式规则。例如：
--------- -----
------
------
--------- ------------
------- -- ---
------------------------------------------ -- - --------------
------------
----- ---------------- ------------------
-------
------
---- ------------------
---- ---------------------------
---- -----------------------------
------
-------
-------这个 HTML 中，我们在 <html> 标签的 class 属性中添加了一个 ie9 类，以便 LESS 编译器能够识别出 IE9 特定的样式规则。
总结
在使用 LESS 时，我们需要注意 IE9 特定嵌套语法导致的错误。为了避免这个问题，我们可以使用 LESS 中的 IE9 特定嵌套语法，并在 HTML 中添加一个 .ie9 的类。这样，我们就可以在大多数浏览器中正常显示样式，同时也能够支持 IE9。下面是完整的示例代码：
---------- -
------ -----
------- -----
------- -
---------- -----
------------- ------- -----
-
-------- -
---------- -----
-
---------- -----
------
------
--------- ------------
------- -- ---
------------------------------------------ -- - --------------
------------
----- ---------------- ------------------
-------
------
---- ------------------
---- ---------------------------
---- -----------------------------
------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65097bf295b1f8cacd434002