: после псевдокласса на IE7 - PullRequest
Новая
       4

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

2 голосов
/ 21 ноября 2011

У меня есть этот код, который показывает маленький треугольник с использованием чистого 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?

Ответы [ 4 ]

2 голосов
/ 04 сентября 2012

Да, это возможно в 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>​
0 голосов
/ 21 ноября 2011

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

0 голосов
/ 21 ноября 2011

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

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

0 голосов
/ 21 ноября 2011

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

http://css3pie.com/

...