|
CSS和XHTML经验：类目之间的竖线问题引发的讨论(1) 段正淳的CSS技巧">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的，我给一个例子：
| 
