2

我有一堆清单

<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 的人。伊诺。我倾向于使 html 混乱，但我想听听是否对此有一些意见。

4

8 回答 8

3

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

于 2009-05-02T13:53:34.000 回答
2

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

于 2009-05-01T21:43:44.067 回答
2
  1. 使用IE7.js hack 添加伪元素支持。
  2. 使用条件注释添加到标记以模拟该效果或删除一些现有样式以使其在没有分隔符的情况下更易于阅读 - 例如，让列表项堆叠在条件注释的样式表中
  3. 通过重新排列样式允许 IE6 优雅地降级，这样就不会发生这种情况，即使它在其他浏览器中看起来不同。
于 2009-05-01T21:50:38.807 回答
1

我只是在生成列表 HTML 时使用服务器端语言来完成。我想这会被认为是“混乱的 HTML”。

于 2009-05-01T21:43:13.910 回答
0

我使用 javascript 和条件注释。即使用jQuery。

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

使用单独的 JS 文件当然更好。
这也有一个缺点，你必须把所有的东西都写两次，因为你把它放在 CSS 中用于好的浏览器，然后再放在 javascript 中用于 IE6。

于 2009-05-02T08:06:51.493 回答
0

尝试使用类似 jQuery 的东西。

`$(函数(){

$('li').not(':last-child').append('\'');

});`

它不会弄乱html。此外，要使其仅适用于 IE，请尝试使用 jquery 兼容性。

于 2009-05-02T16:53:19.887 回答
0

如果您的内容不打算在运行时更改，您可以使用以下内容：

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

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

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

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

于 2014-03-25T22:40:42.300 回答
-1

如果 IE 支持 last-child 你就不需要 class="last" :P。

IE 支持已经并将继续是垃圾。IE 8 已经做出了巨大的改进， :after 和 :before 正如你所期望的那样工作，IE 7 也支持它们。只针对这两个，特别是因为微软正在通过 Windows 更新推出 IE 8。

于 2009-05-01T21:57:10.697 回答