5

css ファイルを手動でより少なく変換しています。ブラウザ固有の css を実行する方法を見つけようとしています。サイトに記載されているように ~"" を使用してエスケープしようとしましたが、コードのブロック全体では機能しないようです。

IE の場合、これらは機能します。

padding: ~"5px\9"; /* IE8 and below */ 
*padding:4px;  /* IE7 and below */ 
_padding:2px;  /* IE6 */

そしてChromeの場合、これは機能します：

/* This will apply the styling only to Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mySelector {
    color: red;
  }
}

しかし、Firefox はどうでしょうか。次のようなものをエスケープするにはどうすればよいですか:

/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: red;
  }
}
4

1 に答える 1

-1

コメントと他のハックの可用性から、回避策を作成しました。

前述のように、WinLess.org コンパイラ (http://winless.org/online-less-compiler) を使用してコンパイルします。

DotLess を使用してコンパイルしないため、ハックを元に戻しました。それ以外の：

#mySelector {
    color: red;
}
/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: green;
  }
}

私は代わりにやった：

/* FF needs green*/
#mySelector {
   color: green;
    /*IEs need red*/
    color: ~"red\9";
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mySelector {
    /*Chrome needs red*/
       color: red;
    }
}
于 2012-07-18T14:03:11.230 に答える