Блог

И снова у меня проблема с использованием IE7.

Я пытаюсь использовать ::after amp; ::before псевдоэлементы, чтобы добавить стрелку в конце курсора моей записи. Это не показано в коде из jsfiddle, но пользователь должен быть полностью свободен в том, как он хочет создать стрелку (размер, тип, цвет и т.д.).

Смотрите jsfiddle

http://jsfiddle.net/22hNA/6/

 <div style=" " 
             id="progress" 
             class="progress">
            <div unselectable="on" style="
                                          color:rgb(0,94,149); 
                                          border-color: rgb(0,0,151);
                                          border-style: dashed;" 
                 id="progressAmount" 
                 class="amount progressamount pseudoelement-after rightRightPlainArrow">

                    <div class="arrow_box ">
                        28
                    </div>

    .progressamount:after, .progressamount:before,
div[class*=pseudoelement] > .before, div[class*=pseudoelement] > .after  {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

/* ------------------------------------------------ right-right plain arrow ------------------------------------------------ */
.rightRightPlainArrow:after,
.rightRightPlainArrow[class*='pseudoelement'] > .after {
    border-right-color: rgb(0,0,0);
    border-width: 13px;
    margin-top: -13px;
    right: -13px;
}
/* ------------------------------------------------------------------------------------------------------------------- */
  

И его полноэкранный результат

http://jsfiddle.net/22hNA/6/embedded/result/

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

Я пробовал много разных вещей, например, используя IE8.js или псевдо-плагин jquery, но который, похоже, не работает в моем случае (и IE8.js устроил большой беспорядок на моей странице). И я также попробовал другой псевдоплагин jquery от luke lutman, но я не знаю, работает ли он или я просто не понимаю, как его использовать. Причина может быть в том, что я уже использую много разных инструментов, чтобы заставить вещи работать с IE7, например, фильтр для градиента или CSSPIE lib для радиуса и тени (которых нет в скрипке).

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

Как я могу заставить эту маленькую стрелку появляться в IE7 (и использовать ::after amp; ::before псевдо el)?

Иногда это просто невозможно?

Спасибо, Тим

Попробуйте использовать стрелки или треугольники блока UTF-8 Unicode

css

 content : "◀";
  

см .

http://utf8-chartable.de/unicode-utf8-table.pl?start=9600amp;number=128

http://utf8-chartable.de/unicode-utf8-table.pl?start=8576