IE8/9下，text-indent对css描绘三角形的影响

不知是哪位牛人发明了用css画三角形这个牛逼的方法，后来这个技术一直流行到现在，的确很好用。在日常项目中也经常会用到这个技术，但是今天在使用的时候，在IE8/9下，使用text-indent的时候会有问题。

先看看实例代码，我们在.right这个div的border上面画一个三角形。

html代码如下：

<div class="right">
	<s><i></i></s>
	<p>画个三角形</p>
</div>

css代码如下：

.right {
	width: 330px;
	height: 30px;
	border: 1px solid #ccc;
	position: relative;
}
.right s {
	border-width: 10px;
	border-style: dashed dashed solid dashed;
	border-color: transparent transparent red transparent;
	position: absolute;
	top: -20px;
	right: 175px;
	text-indent: 30px;
}

在chrome下正确显示如图：

但是在IE8/9下面，这个三角形已经变样咯：

但是IE6/7下面显示正常。

但是如果我们将css代码中的text-indent去掉或者设置为0，那么这个三角形也能在IE8/9下面正常显示。如果要避免这个bug，最好不要在外层容器上使用text-indent。具体是什么原因造成的这个显示错误，我还没有弄明白。可能的原因是text-indent作用于页面元素的时候，在IE6/7和IE8/9的表现形式不一样。

比如，在IE6/7下面，作用于内联元素，相当于设置margin-left，见为内联元素设置text-indent

这里有两篇文章不错，第一篇介绍了css border生成圆角和三角形技术 ；第二篇介绍了text-indent的一些用法和注意事项。