段正淳的css笔记(1)
试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高，真是有点力不从心了。于是转念一想，可以用笔记的形式展现，这样就不用担心写不出来了。
现在就来说个淘宝首页上的一个小技巧。
1、类目之间的横竖线
从很久很久以前开始，类目间的竖线无非都只有三种。
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。
2、符号
在每个a标签之间用””符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。
3、a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。
看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。
其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的，寡人也不知道了。难道寡人是第一个发现这样的做法？
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。
realazy
虽然用border很方便，但有一个缺点：border的高度跟着盒子的高度（在这里是行高）走，如果能忍受这样的高度带来的不美观，那我也没有什么话好说
等ie6淘汰之时，就可以放心用 :first-child了，相权衡的话，我觉得给第一项加上class="first"也不失为实用主义做法。
承志
从设计上来说，加这条竖线又是个“中文网页的无奈”之举。
英文字母本身是曲线占多，加竖线的分隔效果很好。而在中文的横平竖直之中，再加一条竖线，效果已经大打折扣。
所以realazy说的“不美观”，我觉得也有些巧合的实用，竖线比文字还高，在眼睛扫瞄文字时，不容易被误看成文字的一部分。当然，确实还是不美观。
一种美观又有效的分隔的效果设计，也许得等显示器分辨率再翻上几番才行吧：）
aoao
在每个a标签之间用””符号来填充。也不是没意义。。
只是选择使用li时它才是没意义。。。
使用overflow:hidden在IE6有个缺点就是：
你点一下overflow:hidden的对象后按鼠标中键（没有装过罗技鼠标驱动并改变按下中键的功能）时，那个不可爱的四角是不会出现的。。
hax
首先加“”并不是没有意义的做法。其次用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还存世一天，只要我们的设计还是””，这个方法终究是最实用的。我想不明白，谈何误导大家呢？
Fenng
方法都是拿来用的，没有好或者不好之分
Ami
嘿嘿，我和同事想出来过～为了一个不懂CSS的设计师做出来的这个效果，想出来了这招~
怿飞
精品推荐