Как вы работаете с IE, не поддерживающим: после? - PullRequest
Новая
       20

Как вы работаете с IE, не поддерживающим: после?

2 голосов
/ 02 мая 2009

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

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

Ответы [ 8 ]

3 голосов
/ 02 мая 2009

Internet Explorer (IE) не поддерживает: после селектора , мы должны использовать взлом вместо , например этот: 

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.

2 голосов
/ 02 мая 2009
  1. Используйте хак IE7.js для добавления после поддержки псевдоэлемента.
  2. Используйте условные комментарии, чтобы добавить в разметку для имитации этого эффекта или удалить некоторые из существующих стилей, чтобы их было легче читать без разделителей - например, пусть элементы списка складываются в таблицу стилей в условном комментарии
  3. Позвольте IE6 изящно ухудшиться, изменив стиль, чтобы этого не произошло, даже если в других браузерах он выглядит иначе.
2 голосов
/ 02 мая 2009

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

1 голос
/ 02 мая 2009

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

0 голосов
/ 26 марта 2014

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

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

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

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

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

0 голосов
/ 02 мая 2009

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

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

$ ( 'Ли') нет ( ': последний ребенок').. (Добавьте '\' ');

}); `

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

0 голосов
/ 02 мая 2009

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

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

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

0 голосов
/ 02 мая 2009

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

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

...