Иконка Шрифты в IE7

Я не использую шрифт Awesome, но я использую шрифты значков так, как это описано Крисом Койером в CSS Tricks.Иконка Шрифты в IE7

Я хочу настроить его код, чтобы они могли работать в IE7. Я понимаю, что контент не поддерживается в IE7, так что я был смотреть на то, как шрифт Потрясающие имеет дело с вопросом, и это выглядит, как они используют этот JS выражение:

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

Моя проблема заключается в том, что я просто не могу, т получить мой голову вокруг того, что он на самом деле делает. Мне нужно знать это, чтобы я мог настроить его и заставить работать так, как я использую значки.

ДОБАВЛЕНО:

У меня есть это в моем файле Сасс в данный момент:

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

Как я мог бы использовать выражение JS для добавления поддержки IE7 дальше? Может быть, миксин каким-то образом поможет здесь?
Можете ли вы объяснить фактическое выражение JS?

источник

2013-03-06 rctneil

В код, который вы вставили, имеется 2 части. Во-первых, это LESS mixin. Во-вторых, для использования JavaScript используется специальный CSS-код IE. Теперь какую часть вы не понимаете? – cimmanon

Ах, я не понимал, что это было МЕНЬШЕ. Я использую Sass, поэтому я не получил синтаксис LESS для mixins. Я напишу еще несколько вещей в своем OP - Добавлено – rctneil

Прежде всего, вам нужно тайному свой 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; 
}

icon ссылки пример

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

в вашем CSS для IE7

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

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

источник

2013-03-06 21:25:19 olo

Спасибо, но можете ли вы объяснить, как он работает? – rctneil

Я понимаю, как использовать шрифты. Это фактическая строка javascript, которую мне нужно объяснить. У меня сейчас в моих силах: [data-icon]: before { @extend% icon-font; : attr (data-icon); говорить: нет; -webkit-font-smoothing: antialiased Как я могу использовать выражение JS для добавления поддержки IE7? – rctneil

Вы могли бы обеспечить альтернативную таблицу стилей, используя условный, как так (кредиты 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) и в качестве альтернативы дать конкретный класс к вашему селектору HTML, вставляя эту строку ниже вашего DOCTYPE:

<!--[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-06 22:18:59 kartonnade

Спасибо, у меня нет проблемы с тем, как настроить таргетинг на IE7 или другие версии Ie. У меня есть код для этого уже. Мои две проблемы сейчас: 1. Могу ли я сделать CSS, который я разместил в mixin, с этим выражением IE JS? 2. Как работает * zoom: часть? - Я только прошу об этом, поскольку я никогда не видел * zoom внутри, где идут обычные свойства css.Обычно он используется как селектор? – rctneil

Sass эквивалент этой Mixin будет выглядеть так:

@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 и имеет тенденцию быть p возможность выбора для запуска HasLayout (см.: http://haslayout.net/haslayout), потому что у него нет никаких побочных эффектов для браузеров, отличных от IE.

Звёздочка до zoom Недвижимость является вашим стандартом star hack. Он использует ошибку в синтаксическом анализаторе CSS для IE < 8 как способ предоставления стилей исключительно этим браузерам (см.: http://en.wikipedia.org/wiki/CSS_filter#Star_hack)

Выражения - это прежде всего только IE. Они позволяют запускать произвольный JavaScript через CSS (см.: 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-07 03:21:22 cimmanon

Идеально, теперь имеет смысл. Я попытаюсь создать Sass mixin, который должен позволить мне получить значки для работы с резервными записями IE в автономном режиме и с текстовыми ситуациями - надеюсь. – rctneil

Если значок не intented изменить во время выполнения, можно использовать следующее:

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

Если иконка предназначена для изменения во время выполнения, вы могли бы сделать что-то вроде этого:

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

К сожалению, это очень медленно. Хотя он, вероятно, будет работать в IE6 со значительным снижением производительности, IE7, скорее всего, потерпит крах, если на вашей странице слишком много значков. Поэтому я бы не рекомендовал эту вторую технику, если вы не используете только очень мало значков, и вы можете позволить себе снижение производительности.

источник

2014-03-25 22:39:12

Иконка Шрифты в IE7

ответ

Смежные вопросы