Question

我不使用Font Awesome，但我确实使用了Chris Coyier描述的CSS Tricks方式的图标字体。

我希望调整他的代码，使他们能够在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

我如何使用JS表达式添加IE7支持？也许mixin会以某种方式帮助吗？
你能解释一下实际的JS表达吗？

Answer 1

该混音的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属性，并且往往是触发 HasLayout 的选择属性（请参阅：http://haslayout.net/haslayout），因为它对非non没有任何副作用-IE浏览器。

zoom属性之前的星号是您的标准明星黑客。它利用IE解析器中的IE＆lt; 8中的错误作为向这些浏览器专门提供样式的方法（参见：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>

Answer 2

首先，您需要将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'); }

Answer 3

您可以使用类似条件提供替代样式表（Paul Irish} 

然后在你的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 and 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]，但我发现它们对此特别有用。

希望这会有所帮助请让我知道它是怎么回事

查尔斯

Answer 4

如果您的图标无意在运行时更改，则可以使用以下内容：

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

如果您的图标打算在运行时更改，您可以执行以下操作：

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

不幸的是，这非常慢。虽然它可能会在IE6中显着降低您的性能，但如果您的页面上有太多图标，IE7可能会崩溃。所以除非你只使用很少的图标，否则我不会推荐第二种技术，你可以降低性能。

IE7中的图标字体

4 个答案: