2009-05-01 97 views
2

我有一大堆名单你如何解决IE不支持的问题:之后?

<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,但我想听听是否有这方面的一些意见。

回答

2
  1. 使用IE7.js黑客在伪元素支持后添加。
  2. 使用条件注释添加到标记中以模拟该效果或删除某些现有样式以使其更容易阅读而不使用分隔符 - 例如,让列表项在条件注释中堆叠在样式表中
  3. 允许IE6通过重新排列样式来优雅地降级,所以这种情况不会发生,即使它在其他浏览器中看起来不同。
1

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

+1

你是否为所有客户做到这一点,而不用打扰css呢,还是你从它的用户代理中精确定位IE? – xkcd150 2009-05-01 21:45:35

+0

我只是总是这样做,:不幸的是,此时此刻并不是一个特别支持良好的选择器。 – 2009-05-01 21:46:57

+0

:之后在2001年后发布的浏览器中得到很好的支持。用户代理不可靠,特别是在决定浏览器功能方面。 – Anonymous 2009-05-02 01:52:15

2

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

+0

你是认真的吗?D是你通常做什么的? – xkcd150 2009-05-01 21:46:50

+0

我只在这个上下文中使用了竖线,而不是斜杠,在这种情况下,您可以使用边界右边(例如http://entrian.com/source-search/上的顶部导航菜单) – RichieHindle 2009-05-01 21:56:13

-1

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

IE的支持已经并将继续是废话。 IE 8已经做了大量的改进,比如:之后和之前:IE 7支持它们。只要瞄准这两者,尤其是因为微软正在推动IE 8超越Windows Update。

0

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

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

这是更偏向于使用单独的JS文件。
这也有一个缺点,就是你必须将所有东西都写两次,因为你把它放在用于优秀浏览器的CSS中,再用JavaScript放在IE6中。

3

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

0

尝试使用类似jQuery的东西。

`$(函数(){

$( '礼')不是( ':最后的孩子'。)追加( '\'');

});`

它不会弄乱html。 此外,为了使这只适用于IE,请尝试使用jQuery兼容性。

0

如果您的内容不intented在运行时改变,你可以使用以下命令:

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

如果你的内容被设计在运行时改变,你可以做这样的事情:

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

不幸的是,这是非常缓慢的。尽管IE6可能会在性能显着下降的情况下工作,但如果页面上的图标太多,IE7可能会崩溃。所以我不会推荐这个第二种技术,除非你只使用很少的图标,并且你可以承担性能的降低。