CSS和XHTML经验：类目之间的竖线问题引发的讨论

段正淳的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的设计师做出来的这个效果，想出来了这招~
怿飞
结构保证尽量的简洁，语义，对于CSS，可以用很多的方法来实现，至于用哪种方法，如何实现，因人而异，何必执着那么多，实用简洁就好XD
hax
我说段王爷误导，不是说你贡献的的方法不好，或者不实用，实际上作为taobao的设计师，你当然对于怎样权衡取舍最有发言权。

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

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

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

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有