Как вы обходите IE, не поддерживающий:after?
-
03-07-2019 - |
Вопрос
У меня есть куча списков
<ul>
<li class="first">Item 1</li>
<li>Item 2</li>
<li class="last">Item 3</li>
</ul>
стилизованный под
li:after {
content: ' / ';
}
li.last:after {
content: '';
}
Это, должно быть, какая-то банальная проблема.Я думаю, я мог бы либо загромождать html-код, либо вставить промежуточный <li>
они содержат символ, или я мог бы подключить javascript, чтобы поместить их туда, если IE является загружающим браузером, но это не поймало бы людей без javascript.Iuno.Я склоняюсь к загромождению html, но я хотел бы услышать, есть ли какие-то мнения по этому поводу.
Решение
Другие советы
Internet Explorer ( Обозреватель Интернета) (IE) не поддерживает селектор :after, вместо этого мы должны использовать какой-нибудь хак, например , этот:
li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }
"xkcd150" - этот будет добавлен после каждого <li>
.
это выражение, которое обычно используется для замены и исправления некоторых ошибок IE.
Итак, в полный код является:
li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }
li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }
В первой строке добавляется " /", а вторая используется для того, чтобы ничего не добавлять.
Весь код должен быть добавлен в ваш css-файл.
Вот идея, которая вам не понравится. 8-) Поместите ваши символы / в качестве фоновых изображений в правый отступ <li>
.
Я просто делаю это на серверном языке при создании списка HTML. Я полагаю, это будет считаться & "Загромождением HTML"!
Я использую JavaScript и условные комментарии. то есть используя jQuery.
<!--[if IE 6]>
<script type='text/javascript'>
$(document).ready( function() {
$('li').not('li.last').after('/');
});
</script>
<![endif]-->
Конечно лучше использовать отдельный файл JS.
Это также имеет тот недостаток, что вам приходится писать все дважды, поскольку вы помещаете это в CSS для хороших браузеров и снова в JavaScript для IE6.
Попробуйте использовать что-то вроде jQuery.
`$(функция(){
$('li').not(':последний потомок').append('\");
});`
Это не загромождает html-код.Кроме того, чтобы заставить это работать только с IE, попробуйте использовать совместимость с jquery.
Если ваш контент не предназначен для изменения во время выполнения, вы можете использовать следующее:
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
Если ваш контент предназначен для изменения во время выполнения, вы можете сделать что-то вроде этого:
.icon-glass {
*top:expression(0, this.innerHTML = '');
}
К сожалению, это очень медленно. Хотя он, вероятно, будет работать в IE6 со значительным снижением производительности, IE7, вероятно, завершится сбоем, если на вашей странице слишком много значков. Поэтому я бы не рекомендовал этот второй метод, если только вы не используете очень мало значков и не можете позволить себе снижение производительности.
И если IE будет поддерживать last-child, вам не нужно делать class = " last " .: P р>
Поддержка IE была и будет дерьмом. В IE 8 были сделаны значительные улучшения: после и: перед работой, как и следовало ожидать, IE 7 также поддерживает их. Просто нацельтесь на этих двоих, тем более что Microsoft продвигает IE 8 через Windows Update.