本文介绍了一种用于淘宝首页类目间竖线显示的CSS技巧，利用ul的overflow:hidden与li的margin-left实现，有效解决了不同浏览器兼容性问题。
现在就来说个淘宝首页上的一个小技巧。
1、类目之间的横竖线
从很久很久以前开始，类目间的竖线无非都只有三种。
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。
2、符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。
3、a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。
看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。
其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
有时单单是给容器添加overflow: hidden，IE6很可能根本看不见任何效果。
但是一旦容器有了固定的高度、宽度等等拥有了布局角色，overflow: hidden立刻就达到了期望的效果。这个主要是IE6的hasLayout问题：ul默认的hasLayout属性值是false，IE 有一个概念叫做“拥有布局”（hasLayout，如果装了 IE Developer Toolbar 可以在属性栏看到），“拥有布局”某种程度上可以理解为就是拥有固定宽高。有不少 IE6 的bug仅通过给元素添加固定宽高就可以解决，这个就是跟 IE 的“拥有布局”概念紧密相连的。似乎很多时候 IE 都认为只有“拥有布局”的元素才可以拥有别的一些属性，因此有些时候，IE6 明明支持的CSS属性非要等到“拥有”了“布局”才会正常工作。说起来这也不是很难解决的问题，但是动辄要添加固定宽高会无端增加不比较的限制。由于目前还没有更加的解决方案——你能保证你的客户都是用 Fx、Safari、Opera 吗——因此，只能将就一下，think like IE.
下面贴上一个效果图以及测试代码：
扫一扫
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
