0

IE でシャドウを動作させるために、私は髪を引っ張ってきました。誰かがこのテーマの経験がありますか? 完全なコードと出力を確認できるように、サイトを公開しました。

テストサイト

私はlesscssを使用しているので、それが私の問題でしょうか? ないことを願っています!!! IE CSS3 Fix ie-css3.htcも使用しています。使用しているコードは次のとおりです。htc を使用せずにこれを実行しようとしましたが、うまくいきませんでした。少なくとも htc は背景のグラデーションをMicrosoft のデフォルトの背景グラデーション色である青黒のみが表示される前は、IE で作業していました。

predefine.less

.RUNgradient(@COLOR: @CLR1){
  @CLRL:lighten(@COLOR, 10%);
  @CLRD:darken(@COLOR, 10%);
  background-color: @CLRL;
  background-repeat:repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(@CLRL), to(@CLRD));
  background-image: -moz-linear-gradient(top, @CLRL, @CLRD);
  background-image: -ms-linear-gradient(top, @CLRL, @CLRD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @CLRL), color-stop(100%, @CLRD));
  background-image: -webkit-linear-gradient(top, @CLRL, @CLRD);
  background-image: -o-linear-gradient(top, @CLRL, @CLRD);
  background-image: linear-gradient(top, @CLRL, @CLRD);
  behavior: url(css/ie-css3.htc);
}

スタイル.レス

div.wrapper{
    width:500px;
    margin:25px auto;
    padding: 10px 25px;
    text-align:center;
    .RUNgradient;
    .RUNshadow;
    p{
        font:24px @HEADERFONT;
        color:#ffffff;
        .RUNtextshadow;
    }
}

フィルターが答えです！ほとんど...

グラデーションについては、

 filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";

そして影については、

 filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")";

残っているのは、片側だけではなく、要素全体に影が見えるように方向を変えることだけです。

解決

Microsoft フィルターを調査した後、同様の効果を得る方法を見つけました。コーナーは私の好みでは少し荒いですが、これは以前よりもはるかに接近しています!

これは私が使用したシャドウファイラーです...

.RUNshadow(@BLURRING:10px){
    @SCLR:#111111;
    @DIR:225;
    @DIR2:45;
    @DIR3:135;
    @DIR4:315;
    @STR:4;
  box-shadow: 0px 1px @BLURRING #111111;
  -moz-box-shadow: 0px 1px @BLURRING #111111;
  -webkit-box-shadow: 0px 1px @BLURRING #111111;
  filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR2~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR3~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR4~", Strength="@STR~")";
}
4

3 に答える 3

1

IE でシャドウを動作させるために、私は髪を引っ張ってきました。誰かがこの主題について経験を持っていますか?」

ええ、それは正常です。ほとんどの人は気にしません。Web サイトはすべてのブラウザーでまったく同じように見える必要があるかどうかを自問することを忘れないでください。

本当にこれが必要な場合は、IEのグラデーション フィルターを使用する必要があります。RUNgradientクラスに次のスタイルを追加します。

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";
于 2012-05-11T21:19:04.317 に答える
0

どちらにも IE フィルターを使用できます。

gradient filterグラデーションにはShadow filterを、シャドウには を使用できます。グラデーション フィルターは非常にうまく機能しますが、シャドウ フィルターは非常に見栄えが悪くなります。

フィルターの使用方法については、フィルターのドキュメントを参照してください。ただし、自動で行いたい場合は、CSS3がどのようにフィルターを処理し、グラデーションを IE フィルター グラデーションに変換するかを確認する必要があります。

于 2012-05-11T21:20:25.320 に答える