: после псевдокласса в IE7

У меня есть этот код, который показывает маленький треугольник с использованием чистого CSS, и он работает во всех современных браузерах, включая IE8-IE9:

<html>
<head>
    <style>
        .arrow:after {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 4px 0 0 4px;
            vertical-align: top;
            text-indent:-9999px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            content: "&darr;";
        }
    </style>
</head>
<body>
    <div class="arrow">testing</div>
</body>
</html>

Проблема в том, что в IE7 он не работает, просто не отображает стрелку.

Я видел людей, предлагающих использовать ie8.js, но это тоже не работает.

Кто-нибудь знает, как заставить работать на IE7?


css pseudo-class internet-explorer-7
person David Morales    schedule 21.11.2011    source источник

Ответы (4)


arrow_upward
0
arrow_downward

стиль .arrow в условных комментариях специально для ie7. ie7 не понимает: after,: before,: content или display: inline-block, если на то пошло. не глядя на сайт, трудно предложить надежное решение. Навскидку, я бы сделал отображение: block; с отступом текста и использовать фоновое изображение.

person albert    schedule 21.11.2011
comment
Я согласен. Думаю, это лучшее решение по размеру загрузки. Это не то же самое, что загрузить gif размером в несколько байтов, чем javascript размером в несколько килобайт. - person David Morales; 21.11.2011
comment
или display: inline-block в этом отношении, только если собственный дисплей элементов не является встроенным. Если это так, то это нормально. - person Ivan Ivanić; 27.04.2012
comment
голосование против принятых ответов. продолжай троллить. - person albert; 12.12.2012
comment
@jezenthomas, что не так? Уточните ответ, но ваш комментарий бесполезен. - person albert; 22.01.2013
comment
@ Дэвид хотел знать, как заставить его код работать. Ваш ответ не заставляет его код работать. У меня есть. - person Jezen Thomas; 22.01.2013
comment
@jezenthomas Ой, перестань. Если в вопросе не указано, что изменение HTML не является вариантом, стоит предложить. Мой ответ лучше, это не повод для отрицательного голоса; это сообщество, а не соревнование. +1 за вполне разумный вариант. - person WCWedin; 02.05.2013
comment
спасибо за чувствительность. Я был виноват в этом раньше. Хотя приятно, что мне это напомнили. - person albert; 02.05.2013

arrow_upward
2
arrow_downward

Да, это возможно в IE7 без использования плагинов JS. Не позволяйте скептикам вводить вас в заблуждение. Вот ваш обновленный код:

<html>
<head>
<style type="text/css">
    .arrow:after {
        display: inline-block;
        width: 0;
        height: 0;
        margin: 4px 0 0 4px;
        vertical-align: top;
        text-indent:-9999px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid black;
        content: "&darr;";
    }
    .arrow {*zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}
    .arrow .ie-after {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&darr;');}
       </style>
</head>
<body>
    <span class="arrow">testing</span>
</body>
</html>​
person Jezen Thomas    schedule 04.09.2012
comment
Вы можете рассказать нам, что делает * zoom? - person commonpike; 21.01.2013
comment
zoom - это свойство, которое часто используется, чтобы обманом заставить IE установить hasLayout для элемента. Это означает, что элемент отвечает за свои размеры и позиционирование, а не больше полагается на своего родителя. Я добавил звездочку перед свойством, чтобы его читал только IE7. Вы можете узнать больше о взломе звезды здесь. - person Jezen Thomas; 21.01.2013
comment
Отлично. Вы проголосовали против меня в качестве мести, а также из-за того, что не понимаете код. Если присмотреться, можно заметить, что первое выражение CSS создает элемент с классом .ie-after, а второе выражение внедряет его с помощью HTML. Вот скрипка того же кода. - person Jezen Thomas; 22.01.2013
comment
Я проголосовал против тебя из мести и не смотрел на код. Я только что увидел дополнительный класс и сделал свое суждение. ты прав. моя вина. - person albert; 22.01.2013
comment
Я пытался проголосовать, сказал, что мой ответ заблокирован. Как меня разблокировать? - person albert; 22.01.2013
comment
Это нелепый взлом, мне он нравится. - person kand; 06.03.2013

arrow_upward
0
arrow_downward

Вы пробовали использовать CSS3Pie?

http://css3pie.com/

person Jason Gennaro    schedule 21.11.2011

arrow_upward
0
arrow_downward

http://code.google.com/p/ie7-js/ претензии по проекту поддержка :after, :before и content. Вы бы использовали IE8.js его часть.

Тестовая страница: http://ie7-js.googlecode.com/svn/test/index.html

person Strelok    schedule 21.11.2011
comment
Это было первое решение, которое я пробовал перед тем, как задать вопрос, но, как ни странно, оно не работает в IE7. - person David Morales; 21.11.2011