99css: IE6 BUG：边框不能设为透明

前言：

有时候我们需要用纯CSS来写小三角，如下图：

代码：

HTML：

<body>
<div class="pointer">
</div>
</body>

CSS：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果，特意放大

问题：

正常显示效果：

IE6下却遭遇BUG（不透明）：

解决方法：

将实线改为虚线，代码：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent dotted;/*dashed亦可*/border-right:200px red solid;font-size:0;}

IE6下显示效果：

虽然边缘有轻微锯齿，但可以接受

意外收获：

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿

99css