#javascript #jquery #jquery-plugins #internet-explorer-7 #pseudo-element
#javascript #jquery #jquery-плагины #internet-explorer-7 #псевдоэлемент
Вопрос:
И снова у меня проблема с использованием IE7.
Я пытаюсь использовать ::after amp; ::before псевдоэлементы, чтобы добавить стрелку в конце курсора моей записи. Это не показано в коде из jsfiddle, но пользователь должен быть полностью свободен в том, как он хочет создать стрелку (размер, тип, цвет и т.д.).
Смотрите jsfiddle
<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)?
Иногда это просто невозможно?
Спасибо, Тим
Комментарии:
1. Наступит ли конец света, если браузер семилетней давности не будет отображать маленькие причудливые стрелки?
2. Спасибо @NiettheDarkAbsol
Ответ №1:
Попробуйте использовать стрелки или треугольники блока UTF-8 Unicode
css
content : "◀";
см .
http://utf8-chartable.de/unicode-utf8-table.pl?start=9600amp;number=128
Комментарии:
1. О да, почему бы и нет, я могу использовать эту альтернативу в случае IE7. Единственное, что пользователь должен быть полностью свободен в том, как он хочет создать стрелку (фактически весь элемент управления) и выбрать тип, размер и цвет, но, похоже, это невозможно в данном конкретном случае…
2.Различные параметры («тип») должны быть найдены по ссылкам в post .
css
color
должно быть установлено так же, как и обычное свойство css, например,color:blue;
(«color»). Размер также должен быть задан обычным css, например,font-weight:500;
, и т.д. Кстати, пользователь должен быть полностью свободен в том, как он хочет создать стрелку (фактически весь элемент управления), и выбрать тип, размер и цвет, которые не отображаются как включенные в качестве части требования в исходном сообщении? Возможно, отредактируйте OP, чтобы включить, описать все аспекты требования? Спасибо3. пользователь должен быть полностью свободен в том, как он хочет создать стрелку (фактически весь элемент управления), и выбрать тип, размер и цвет -user3665301 . Пробовал
canvas
элемент?4. Да, я забыл указать это, и это важно. Но ваша первая идея интересна, и я собираюсь взглянуть на нее прямо сейчас и посмотреть, что я могу сделать. А в противном случае взгляните на элемент canvas. Спасибо @guest , я буду держать вас в курсе событий 🙂