LESS 属性在 Firefox 中加载不一致

Question

我正在通过在 index.html 中添加 less.js 来编译我的 LESS 文件。我的代码如下：

<head>
  <link rel="stylesheet/less" type="text/css" href="style.less"/> <!--my own styles go in this file -->
</head>
<body>
  <div class="blue-text">Hello</div>
  <div class="blue-background"></div>
  <script src="jquery.js"></script>
  <script src="less.js"></script>
  <script src="script.js"></script> <!--my own script file -->
</body>


//style.less
.blue-text {
  color: blue;
}

//script.js
(function(){
  $('.blue-background').css('background', $('.blue-text').css('color'));
})();

现在，当我在浏览器中呈现此页面时，它在 Chrome 浏览器中呈现得很好。但在 Firefox 中，蓝色背景并不是每次都能获得颜色。有时来有时不来。

我该怎么做才能解决这个问题？

Answer 1

发生这种情况是因为不同的浏览器在呈现页面时表现不同。

在你的例子中，script.js 是运行，然后 less 文件被编译成 css 文件。所以它无法从蓝色文本 class 中读取它会将其应用于蓝色背景，因为 class 尚不可用于 dom。

唯一的解决办法是你必须手动将 less 编译成 css 并在 html 文件中使用 css 这样你就可以确保你的 less 在你的页面之前编译渲染。

如果你不想每次都手动完成，你可以使用一些自动化的 javascript 任务运行ners 就像我使用 Gruntjs.

LESS 属性 在 Firefox 中加载不一致

LESS property loading inconsistently in Firefox

html

javascript

css

jquery

less

LESS 属性在 Firefox 中加载不一致