1

IE8 は に対応していないので、Less で別の背景画像を設定したいbackground-size。

IE8 のハックについて Google で検索したところheight: 300px\9;、\9.

これを試してみましたが、設定をサポートしていないことがわかりましたbackground-image。

こう書くと

.backgroundImage(@url) {
  background-image: url('@{base_url}@{url}.png');
  background-image: e("url('@{base_url}x/@{url}.png')\9");
}

#demo {
  .backgroundImage('large_cloud');
}

、Lessコンパイラはエラーを出しますheight: 300px\9;。このように設定すると、コンパイラはエラーを表示しません。

だから、私は非常に混乱しています。Less hack の使い方background-imageIE8 での設定。

4

3 に答える 3

2

Less は適切な CSS と互換性があるように書かれているため、ハッキングに使用すると常に正しく動作するとは限りません。heightandのようないくつかのハックcolor(以下にリンクされているスレッド) が機能する可能性がありますが、すべてが機能することを保証するものではありません。適切にコンパイルするためにハックのある値が必要な場合は、以下のように値をCSS エスケープするのが安全です。

#demo{
  background-image: ~"url('myimage-400px.png')\9";
}

またはとして

#demo{
  background-image: e("url('myimage-400px.png')\9");
}

上記の解決策は純粋に Less コンパイラ エラーに対するものであり、それが実際に IE8 で機能するかどうかはよくわかりません。その方法が機能しない場合は、この SO スレッドで提案されているオプションを確認することをお勧めします。

注：この質問はこれに似ていますが、これは値に関するものであるのに対し、これはプロパティ名の補間に関するものであるため、同じではありません。

于 2016-01-18T05:09:13.763 に答える
0

ここでは、私が使用する手法と、LESS で記述したときにコンパイルするための秘訣を示します。

1) background-sizeプロパティを含まない古いブラウザー用の背景 CSS を作成します。例えば：background:transparent url(/img/path-to-image-ie8.png) 0% 0% no-repeat;

2) background-sizeプロパティを含む最新のブラウザ用の背景 CSS を記述します。例えば：background:transparent url(/img/path-to-image.png) 0% 0%/100% auto no-repeat;

古いブラウザは 2 行目を認識せず、無視します。最近のブラウザは 1 行目を 2 行目で上書きします。

LESS でコンパイルするには、次の/よう に記述します。background:transparent url(/img/path-to-image.png) 0% 0%~"/"100% auto no-repeat;

于 2016-01-18T05:49:20.293 に答える
0

ハッキングは完全に避けるべきです。代わりに、直面しているバージョン固有の問題に対処するスタイルシートを IE 8 ユーザーに条件付きで提供します。

<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" /><![endif]-->

構文上の癖に依存すると、意図しない副作用が発生することが多く、一般に、宣伝されているよりも影響を受ける範囲が大きくなります。一方、条件付きコメントは、本来、バージョン固有の命令を適用するように設計されています。

于 2016-01-18T05:17:21.573 に答える