Pourquoi mon code LESS.js ne fonctionne-t-il pas dans Chrome ?

Problème de compatibilité LESS.js dans Chrome

Vous avez rencontré une situation dans laquelle LESS.js semble être fonctionnel dans Firefox mais pas dans Chrome. Pour déterminer la cause sous-jacente, examinons le code fourni :

<code class="html"><link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}</code>

Le code semble syntaxiquement correct, mais abordons votre observation selon laquelle html { background: red; } ne prend pas effet non plus dans Chrome.

L'explication réside dans un problème connu avec Chrome. Selon la documentation LESS.js, le script du navigateur ne fonctionnera pas si le chemin d'accès à votre page commence par "file:///" en raison d'une limitation spécifique à Chrome.

Pour Pour résoudre ce problème, envisagez d'utiliser un serveur Web pour héberger votre page au lieu de l'ouvrir directement à partir d'un fichier local. Alternativement, vous pouvez explorer en utilisant un fichier CSS LESS prédéfini au lieu de vous fier au script du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!