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>，或者如果IE是加载浏览器，我可以挂钩javascript将它们放在那里，但是这不会抓住没有javascript的人。 Iuno。我倾向于混淆HTML，但我想听听是否有一些意见。

Answer 1

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文件中。

Answer 2

这是一个你不喜欢的想法。 8-）将/符号作为背景图像放在<li> s的右侧填充中。

Answer 3

使用IE7.js hack在伪元素支持后添加。
使用条件注释添加到标记以模拟该效果或删除一些现有样式，以便在没有分隔符的情况下更容易阅读 - 例如，让列表项堆叠在条件注释的样式表中
通过重新排列样式允许IE6正常降级，这样就不会发生这种情况，即使它在其他浏览器中看起来不同。

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 for IE6。

Answer 6

尝试使用类似jQuery的东西。

'$（函数（）{

$（ '礼'）不是（ '：最后子'）。追加（ '\''）;

}）;`

它不会使HTML混乱。另外，要使其仅适用于IE，请尝试使用jquery兼容性。

Answer 7

如果您的内容无意在运行时更改，则可以使用以下内容：

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

如果您的内容打算在运行时更改，您可以执行以下操作：

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

不幸的是，这非常慢。虽然它可能会在IE6中显着降低您的性能，但如果您的页面上有太多图标，IE7可能会崩溃。所以除非你只使用很少的图标，否则我不会推荐第二种技术，你可以降低性能。

Answer 8

如果IE支持最后一个孩子，你就不需要做class =“last”：P。

IE支持已经并将继续是废话。 IE 8已经做了大量的改进：在之后和之前，正如你所期望的那样，IE 7也支持它们。只针对这两者，特别是因为微软正在通过Windows Update推出IE 8。

你如何解决IE不支持：之后？

8 个答案: