2

私は Font Awesome を使用していませんが、CSS Tricks で Chris Coyier が説明している方法でアイコン フォントを使用しています。

彼のコードを微調整して、IE7 で動作できるようにしたいと考えています。生成されたコンテンツが IE7 でサポートされていないことに気付いたので、Font Awesome がこの問題にどのように対処しているかを調べたところ、次の JS 式が使用されているようです。

.ie7icon(@inner) {
  *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')";
}

私の問題は、それが実際に何をしているのか理解できないことです。アイコンを使用している方法で微調整して機能させることができるように、これを知る必要があります。

追加した：

現在、Sassファイルにこれがあります：

[data-icon]:before {
  @extend %icon-font
  content: attr(data-icon)
  speak: none
  -webkit-font-smoothing: antialiased

  1. JS 式を使用して IE7 サポートを追加するにはどうすればよいですか? たぶん、ミックスインがここで何らかの形で役立つでしょうか?

  2. 実際の JS 式について説明していただけますか?

4

4 に答える 4

7

その mixin に相当する Sass は次のようになります。

@mixin ie7icon($inner) {
    *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{$inner}');
}

.foo {
    @include ie7icon(\f000);
}

出力：

.foo {
  *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '\f000');
}

ズームは独自の IE CSS プロパティであり、非 IE ブラウザーに対して副作用がないため、HasLayout ( http://haslayout.net/haslayoutを参照)をトリガーするために選択されるプロパティになる傾向があります。

zoomプロパティの前のアスタリスクは、標準的なスター ハックです。IE<8 用の CSS パーサーのバグを悪用して、これらのブラウザーにのみスタイルを提供します ( http://en.wikipedia.org/wiki/CSS_filter#Star_hackを参照) 。

式は主に IE のみのものです。CSS を介して任意の JavaScript を実行できます ( http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspxを参照)。この特定の式は、適用されているタグの内容を の値で設定している$innerため、実際には次のような空のタグでのみ使用することを意図しています。

<p><i class="foo"></i> I have an icon!</p>
于 2013-03-07T03:21:22.970 に答える
0

まず第一に、あなたはあなたのimgをフォントフォーマット、fontsquirrel.comに変換する必要があります

そしてcssは

@font-face { font-family: 'imgtoicon';
src:url('icons.eot');
src: url('icons.eot?#iefix') format('embedded-opentype'),
url('icons.ttf') format('truetype'),
url('icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}

フォントのクラス名を作成します

.iconic {
display:inline-block;
font-family: 'imgtoicon';
font-weight: normal;
-webkit-font-smoothing: antialiased;
}

アイコン参照の例

.cat:before{content:'\e011';}
.dog:before{content:'\e022';}

IE7のCSSで

  .iconic {
        font-family: 'imgtoicon'; 
        font-weight: normal;
        }

    .cat{ *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = '\e011'); }
于 2013-03-06T21:25:19.793 に答える
0

アイコンが実行時に変更されることを意図していない場合は、次を使用できます。

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;');
}

アイコンが実行時に変更されることを意図している場合は、次のようにすることができます。

.icon-glass {
  *top:expression(0, this.innerHTML = '&#xf000;');
}

残念ながら、これは非常に遅いです。IE6 では動作する可能性がありますが、パフォーマンスが大幅に低下しますが、ページにアイコンが多すぎると IE7 がクラッシュする可能性があります。したがって、ごく少数のアイコンのみを使用し、パフォーマンスの低下を許容できる場合を除き、この 2 番目の手法はお勧めしません。

于 2014-03-25T22:39:12.523 に答える
0

そのような条件を使用して代替スタイルシートを提供できます（Paul Irishのクレジット）<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->

次に、 ie7.css で:

[class^="icon-"],
[class*=" icon-"] {
  font-family: your-icon-font;
 } 
.icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }

*zoom は要素にレイアウトを与え、IE+windows の奇妙な動作をデバッグするのに役立つと思いますが、this.innerHTML を使用すると、アイコンに対応する utf8 値を提供できます。

次のようにすることもできます (まだPaul Irish と h5bp )。代わりに、次の行を DOCTYPE の下に貼り付けて、特定のクラスを html セレクターに指定します。

<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

その後、あなたは行くことができます

.lt-ie8 [class^="icon-"],
.lt-ie8 [class*=" icon-"] {
  font-family: your-icon-font;
 } 
.lt-ie8 .icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }

h5bp は IE6 IE7 のサポートを終了する予定であり、[これらの条件の完全な削除][3] を検討していますが、特にこれに役立つと思います。

これが役立つことを願っています

チャールズ

于 2013-03-06T22:18:59.683 に答える