不知是哪位牛人發明了用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的一些用法和注意事項。

總結

以上是生活随笔為你收集整理的IE8/9下，text-indent对css描绘三角形的影响的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。