之前研究过不用图片而用纯css做小三角,需要设置border为transparent,但是IE6下border transparent无效,当时选用了filter的方法,但是这方法不太好,后来又发现使用dotted或者dashed这种虚线,刚好可以利用两点之间的间隔。

今天做日常又用到了三角,不想用图片,所以还是选用这种方法,但是写完代码发现在IE6下还是会出现一点点的黑边,当时做的三角border设置很小,只有3px,外容器也只有5px高,以为是border设置小的时候虚线间隔有问题,毕竟IE6下对于虚线的认识还是有问题的,border宽度为1px时dotted会渲染的跟dashed一模一样。

但是回家写了上下左右四个方向的小三角,然后设不同宽度测试后,就发现真正的原因是IE6下高度问题,虽然设置了height为0,但是IE6在其内容为空的情况下还是会有一定高度,原来是font-size、line-height在作怪,这两个取其一设为0就OK了。这下高度真的是为0了,泪奔啊~~~

border设dashed或者dotted其实都OK,只要高度真的为0了就可以。不为0的情况下么,border宽度在10px及以上时也是不会有黑线出现的;5px-9px之间时dotted线会出现而dashed不会;2px-3px则是dashed线比较明显,点之间的间隔小,而dotted点之间的间隔更大一点;1px下两者都出现一样的黑虚线。

posted on 2010-11-04 23:19  水忧狐  阅读(688)  评论(1编辑  收藏  举报