2

我不使用 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

  1. 如何使用 JS 表达式添加 IE7 支持？也许mixin会以某种方式帮助这里？

  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');
}

Zoom 是一个专有的 IE CSS 属性，并且往往是触发HasLayout的首选属性（参见：http ://haslayout.net/haslayout ），因为它对非 IE 浏览器没有任何副作用。

属性前面的星号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 可能会崩溃。所以我不会推荐第二种技术，除非你只使用很少的图标并且你可以承受性能下降。

于 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 回答