Как вы обходите IE, не поддерживающий:after?

Question

У меня есть куча списков

<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, но я хотел бы услышать, есть ли какие-то мнения по этому поводу.

Answer 1

<Ол>

Используйте IE7.js , чтобы добавить после поддержки псевдоэлемента.

Используйте условные комментарии, чтобы добавить в разметку, чтобы имитировать этот эффект, или удалить некоторые из существующих стилей, чтобы их было легче читать без разделителей - например, пусть элементы списка складываются в таблицу стилей в условный комментарий

Позвольте IE6 изящно ухудшиться, изменив стиль, чтобы этого не произошло, даже если в других браузерах он выглядит иначе.

Answer 2

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-файл.

Answer 3

Вот идея, которая вам не понравится. 8-) Поместите ваши символы / в качестве фоновых изображений в правый отступ <li>.

Answer 4

Я просто делаю это на серверном языке при создании списка HTML. Я полагаю, это будет считаться & "Загромождением HTML"!

Answer 5

Я использую JavaScript и условные комментарии. то есть используя jQuery.

 <!--[if IE 6]>
   <script type='text/javascript'>
     $(document).ready( function() {
      $('li').not('li.last').after('/');
     });
   </script>
 <![endif]-->

Конечно лучше использовать отдельный файл JS.
Это также имеет тот недостаток, что вам приходится писать все дважды, поскольку вы помещаете это в CSS для хороших браузеров и снова в JavaScript для IE6.

Answer 6

Попробуйте использовать что-то вроде jQuery.

`$(функция(){

$('li').not(':последний потомок').append('\");

});`

Это не загромождает html-код.Кроме того, чтобы заставить это работать только с IE, попробуйте использовать совместимость с jquery.

Answer 7

Если ваш контент не предназначен для изменения во время выполнения, вы можете использовать следующее:

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

Если ваш контент предназначен для изменения во время выполнения, вы можете сделать что-то вроде этого:

.icon-glass {
  *top:expression(0, this.innerHTML = '');
}

К сожалению, это очень медленно. Хотя он, вероятно, будет работать в IE6 со значительным снижением производительности, IE7, вероятно, завершится сбоем, если на вашей странице слишком много значков. Поэтому я бы не рекомендовал этот второй метод, если только вы не используете очень мало значков и не можете позволить себе снижение производительности.

Answer 8

И если IE будет поддерживать last-child, вам не нужно делать class = " last " .: P

Поддержка IE была и будет дерьмом. В IE 8 были сделаны значительные улучшения: после и: перед работой, как и следовало ожидать, IE 7 также поддерживает их. Просто нацельтесь на этих двоих, тем более что Microsoft продвигает IE 8 через Windows Update.