私の LESS.js コードが Chrome で動作しないのはなぜですか?-CSSチュートリアル-php.cn

私の LESS.js コードが Chrome で動作しないのはなぜですか?

Susan Sarandon

リリース： 2024-11-03 18:05:03

オリジナル

474 人が閲覧しました

Why Doesn't My LESS.js Code Work in Chrome?

Chrome での LESS.js の互換性の問題

LESS.js が Firefox では機能しているように見えるが、Firefox では機能しないという状況に遭遇しました。クロム。根本的な原因を特定するために、提供されたコードを調べてみましょう。

<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>

ログイン後にコピー

コードは構文的には正しいように見えますが、html {background:red; という観察に対処しましょう。

この説明は、Chrome の既知の問題にあります。 LESS.js のドキュメントによると、Chrome 固有の制限により、ページへのパスが「file:///」で始まる場合、ブラウザスクリプトは機能しません。

この問題を解決するには、ローカルファイルから直接ページを開くのではなく、Web サーバーを使用してページをホストすることを検討してください。あるいは、ブラウザスクリプトに依存する代わりに、事前に構築された LESS CSS ファイルを使用して探索することもできます。

以上が私の LESS.js コードが Chrome で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。