虽然用border很方便，但有一个缺点：border的高度跟着盒子的高度（在这里是行高）走，如果能忍受这样的高度带来的不美观，那我也没有什么话好说  

等ie6淘汰之时，就可以放心用 :first-child了，相权衡的话，我觉得给第一项加上class="first"也不失为实用主义做法。

从设计上来说，加这条竖线又是个“中文网页的无奈”之举。
英文字母本身是曲线占多，加竖线的分隔效果很好。而在中文的横平竖直之中，再加一条竖线，效果已经大打折扣。
所以realazy说的“不美观”，我觉得也有些巧合的实用，竖线比文字还高，在眼睛扫瞄文字时，不容易被误看成文字的一部分。当然，确实还是不美观。
一种美观又有效的分隔的效果设计，也许得等显示器分辨率再翻上几番才行吧：）

在每个a标签之间用”|”符号来填充。也不是没意义。。
只是选择使用li时它才是没意义。。。

使用overflow:hidden在IE6有个缺点就是：
你点一下overflow:hidden的对象后按鼠标中键（没有装过罗技鼠标驱动并改变按下中键的功能）时，那个不可爱的四角是不会出现的。。

首先加“|”并不是没有意义的做法。其次用margin-left的方法也不见得好。比方说也有border高度的问题。

我觉得有人跟风你也别得意。因为我觉得这个方法一点也不好。很简单的一个理由：这只是一个trick，只适合这特殊情况，假设你要换用“-”来分割呢？

作为插入分割符号来说，真正合理使用css的，我给一个例子：

li ~ li:before { content:’-'; margin:0.25em; }

优点：含义非常清晰，维护性极高。你可以换任何的分隔字符，可以设定字体，可以设定颜色、大小等样式，甚至可以换用图片作为分隔。

好了，下面说缺点。

唯一的缺点：IE不支持。没错，这就是为什么我们大部分开发者的css水平老是不长进的原因。

不过老是用这个借口也有点寒碜。毕竟Dean Edwards都给我们搞了一个开源的ie7（自从真的MSIE7出来后，它改名叫FixIE）。

当然，我承认DE的ie7在很多方面不适用于taobao这样的网站。对于taobao这样的，甚至裁剪使用ie7都是不可行的，需要有足够能力借鉴ie7自己搞一个替代方案——而这个很难。

所以我在这里的意思是，margin-left对于taobao也许还算一个比较合用的小hack，但拿出来现就有点误导大家了。

楼上说的几种方法我都考虑过，只不过我选择了最实际的一种。只要ie还存世一天，只要我们的设计还是”|”，这个方法终究是最实用的。我想不明白，谈何误导大家呢？

方法都是拿来用的，没有好或者不好之分

嘿嘿，我和同事想出来过～为了一个不懂CSS的设计师做出来的这个效果，想出来了这招~

结构保证尽量的简洁，语义，对于CSS，可以用很多的方法来实现，至于用哪种方法，如何实现，因人而异，何必执着那么多，实用简洁就好XD

我说段王爷误导，不是说你贡献的的方法不好，或者不实用，实际上作为taobao的设计师，你当然对于怎样权衡取舍最有发言权。

我说的是，你没有把权衡的前提条件说清楚，因此对读者有误导。特别是对于怎样写css有误导。抛开taobao的特定环境和限制性的需求，你对几个方案的比较，最后选择你现在这个，实际上理由并不充分，而且你也没有指出你自己方案的缺点。从一般角度说，相比较我所指出的缺点，前面三种方式所存在的缺点并不见得就更严重。

所以你的误导在于对整个取舍的过程，优劣的比较上。特别是你的方法，对于设计来说存在一些严重的约束，例如只能是竖线。技术是为设计服务的，而不是相反。（当然技术对设计有约束是正常的，但是要看是怎么样的约束。）

这里存在一个因果关系，对于你来说，可能因果是清楚的，有了taobao（竖线）需求的因，才有你选取这样的trick的果。但是对于其他人来说，就很可能混淆因果，将一个带有很大局限性的trick奉为圭臬，到时候也许你自己也会觉得可笑呢。

这里有些人讲什么“实用第一”，我建议应该好好反省一下。小马同志，按照这种逻辑，table布局很实用呢，font也很实用呢。也许你觉得冤枉，此实用不同于彼实用。Ok，这就是问题所在。你怎么分析到底实用与否呢？不能拿一句“实用第一”就搪塞过去了。那是废话。需时时警惕，不要用双重标准——对己有利的，就实用，对己不利的，就不实用。

还有恕我直言，拍王爷马屁，也要有点技巧。比如“方法都是拿来用的，没有好或者不好之分”的那位，段王爷不是在点评几种方法的好坏么，你这个马屁可拍歪了。

我在回过头来说说段王爷说的“最实际的一种”，你的实际，需要有一个判断标准，需要有前提的。你后面提到的“IE”和“竖线设计”就是你在原文中所遗漏掉的前提。

这些前提对你来说也许是自然的，但是不能想当然的就变成默认前提啊。那就变成绝对化的“最实际”了。“竖线”那个问题，我前面已经说过了，这里不再赘述。我这儿单说说IE。首先并非所有应用，所有网站都必须考虑IE。比如XUL应用，比如可以选择客户端部署的企业网站。

其次——这是我说的重点——为什么我们一定要确保所有浏览器里的样子是完全一致的呢？内容样式分离，以及css的内在之意，就包涵了graceful degradation的设计意图。在这个例子里，IE不显示分隔，的确不太完美，但并不损害用户对内容的理解和使用。

注意，我不是说taobao或者任何网站就应该采取我说的方法。这完全取决于各种外在条件下的权衡。我想要说的是，不要对贸贸然的说“实际”和“实用”，还没有思考就预先排除了很多可选项。实际上绝大多数网站是可以采用graceful degradation的设计方法的。

再次，就算要同时做到“在IE下的完美呈现”，也不是没有其他方法。例如我说的Dean Edwards的ie7开源项目。它也许不适用taobao，但是可以适用于其他项目。

我个人比较喜欢的方式是，按照标准css2写，然后为ie单独写hack，通过css、css e­xpression、behavior甚至一段script，都是可行的，包括对于taobao这种类型的（大型商业网站），我认为也是可行的。当然，这样一种方式，许多人可能不认同，认为太困难，或不如用一些更特例的trick有效。这个就看如何权衡了，需要另一篇文章来探讨。

最后顺便再对“实用论”说一点，关于table布局和实用主义的问题，在这个讨论（http://www.javaeye.com/topic/95739?page=4）中，我有几小段思考，copy过来供大家批判：

……Sure。昨天晚上我拿DHH原文看了一遍，我觉得他只是不满于Adobe/Microsoft摆出一副解救众生于Web水火中的姿态，而许多人高声应和。

另外，看看comments，也有许多人反对他的意见的——其中甚至包括一个Adobe的Flex Marketing Team的……多数人的论调是：工具么，各有擅场。老实说，这种实用主义论调还真是不可爱，难怪好多人（包括dlee）要对老是引用南方公园中的愤青 Cartman的粗口的DHH崇拜有加。

从技术美感的角度说，我不能隐藏我是如此喜爱xhtml/css/javascript……

……但是回到现实中，现有的标准，现有的实现，确实有太多不足了。也难怪人家鼓吹新的银弹么。

……凡给定界面的都或多或少倾向于grid 布局，仅仅是复杂程度的问题。例如仿桌面的界面（蛮流行的）。因为桌面应用中，几乎大都使用各种类型的grid布局。我以前一直鼓吹在web上就应该使用 flow布局而不应使用grid布局。但是随着对交互设计的认识加深，我意识到应该从用户体验出发。从技术上说，flow布局的主要好处是灵活适应不同的 viewport，但是真正把一个1280*1024的界面转换到640*480或者更小的viewport里，不是那样简单的。他们的应用场景很可能有很大不同。理想上，我未来能使用css media query，来为不同的分辨率（应用场景）来设计，对布局乃至流程做完全不同的调整。但是理想不等于现实。无法实现或太晚实现……都可能导致我们不愿看到的情况。

另外一方面，我恰恰是想要完全否定table布局的，正是基于此，我认为出现这样讽刺的情况，即遵循标准的人活得比不遵循的人更累，是很有问题的。这种矛盾在我身上存在着，2001年的时候我在某bbs上发了个贴，大数table布局之罪，但是过了几天我又跑上去说table布局在某种情况下也可以用用。 dlee同志貌似到现在也跟我当时一样。如果你确实认为，table布局从实用主义角度无法被完全否定，那DHH同志采用实用主义的角度来力挺 html/css/js就也有点心虚，那个标题也就显得带点任性味道。。。

……再说table吧，从实用主义角度说，谨慎的table布局也许更简单，因为它更好的映射到了grid模型上。如果你转用div/span，标签是清晰了，但是css是混乱的！！为什么？因为你无论绝对定位也好，float也罢，这些属性是分散的，css代码无法反映整体，无法记录你的grid布局意图！这是为什么我们经常说我有一个css trick的原因，它是trick而已，是你达到最终目的的手段，但是你的目的，你的意图，没有好好加入文档的话，那维护起来恐怕也不见得轻松：

table布局 其他css样式 = 清晰的布局意图和内容的混合体
vs
div容器 css样式 = 内容样式分离，但是从css代码中很难看出布局意图

关于div/css布局还有一些误区，简单的把table标签换成div是没有意义的（若干层级的div可能比table更糟糕）。实际上我们希望的是语义标签。所以我们希望避免无意义或仅仅为layout或presentational的div标签，但是有时候居然是css hack的代价（比方说在某些css圆角实现中）！

也许归根到底是怪css还不够好，怪browser的实现还不够好。比方说你要在一行上放两个东西，实际上可能需要的是css column支持。。。但是还是那样，开发者的耐心是有限的，勾画的美好蓝图从来不如微软的甜蜜诱惑。特别是他们许诺通过更智能（更邪恶的宝葫芦的秘密？）的ide，也能提供你所说的web标准网站的可维护性的时候。对于他们来说，html css js，或者是flash，只是开发者看不见的 presentation层而已（据csdn新闻上元红岗同志的说法是不依赖於表现层的表现层），它帮你抹平了，你不用担心。按照这种逻辑，现在的 WYSIWYG工具只是不够智能而已而已。。。

hax写得比较零散还有点跑题，我只能说，我个人而言不全认可你的观点，但是觉得有些地方闪着难得一见的火花。

段正淳确实给出了解决问题的一个好办法。

只是这个问题解决与不解决，其实对整体的影响并不大，难道不用hack设计师就不能出好设计了嘛？既然把竖线视为表现，表现不能换方式吗？
另外，符号并非无意义，比如2007/8/13、2007-8-13，当然你要说这不一样，我只是说符号并非无意义。在特定情况下我使用它分割tag，未尝不可。

很多时候，css的水平到一定程度，再深入下去对个人能力的提高微乎其微，对网站的影响同样是微乎其微。

@hax
“我觉得有人跟风你也别得意。因为我觉得这个方法一点也不好。很简单的一个理由：这只是一个trick，只适合这特殊情况，假设你要换用“-”来分割呢？”

你咋知道正淳得意了呐？呵呵。
我帮正淳答了，背景图片。

置于你说的：li ~ li:before { content:’-’; margin:0.25em; }，未免贻笑大方。不能用的技术再好也没用，我甚至懒得去学习，等IE支持太遥远。而且如果当IE完全支持CSS3的时候，你还在做细节css设计，未免太失败。

To 爆牙齿：

得意是文章里流露出来的感觉啰。

“难道寡人是第一个发现这样的做法？不管是谁先此之前利用了这样的方法实现类目间竖线。不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。”

当然，读文章的感受可能因人而异。而且我只是说他的方法不够好还不足够拿来得意，不是说得意本身就不好。有机会得意一下，一直是我辈的目标。

还有，你帮他答了一个背景图片，不是已经被他自己否定了嘛。

最后，你认为我说的方法“不能用”，看来我前面写的离题的东西太多，影响了你对主要部分的理解啊。令我纳闷的是，如果你没有理解我说的意思，那你认为“有些地方闪着难得一见的火花”到底是啥呢？

还有最后一句话。一个是，我这个方法不需要等css3，css2.1就可以了。其次，原来做细节css设计是失败的象征啊。我通常也会做细节html设计，细节javascript设计，细节ajax设计，细节server端程序设计……看来我真是失败中的失败。

謝謝分享, 很實用的技巧

我想這樣的技巧應該是可以套用在一般的圖片上的
並不限制於border

這裡是我整理過後的範例
http://www.hedgerwow.com/360/dhtml/css-menu-separator.html

不管你用第一种方法也好，第二三种方法也罢都是可以的，因为各种方法各有利弊，从现有的浏览器为基础考虑无所谓的最优化。没有所谓不好的方法，只有不好的环境，所以在特定的环境条件下我们在有选择性的用其中一种方法去实现我们想要的效果。