gpt4 book ai didi

javascript - LESS 属性在 Firefox 中加载不一致

转载 作者:太空宇宙 更新时间:2023-11-04 12:16:51 26 4
gpt4 key购买 nike

我正在通过在我的 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 中,蓝色背景并不是每次都能获得颜色。它有时会出现,有时不会。

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

最佳答案

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

在您的情况下,script.js 在 less 文件编译到 css 文件之前运行。因此它无法从蓝色文本类中读取它会将其应用于蓝色背景,因为该类对于 dom 尚不可用。

唯一的解决办法是你必须手动将 less 编译成 css 并在 html 文件中使用 css,这样你才能确保你的 less 在你的页面呈现之前编译。

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

关于javascript - LESS 属性在 Firefox 中加载不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28642499/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com