现在就来说个淘宝首页上的一个小技巧。
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.
下面贴上一个效果图以及测试代码: