不知是哪位牛人发明了用css画三角形这个牛逼的方法,后来这个技术一直流行到现在,的确很好用。在日常项目中也经常会用到这个技术,但是今天在使用的时候,在IE8/9下,使用text-indent的时候会有问题。
先看看实例代码,我们在.right这个div的border上面画一个三角形。
html代码如下:
<div class="right">
<s><i></i></s>
<p>画个三角形</p>
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的一些用法和注意事项。
不知是哪位牛人发明了用css画三角形这个牛逼的方法,后来这个技术一直流行到现在,的确很好用。在日常项目中也经常会用到这个技术,但是今天在使用的时候,在IE8/9下,使用text-indent的时候会有问题。先看看实例代码,我们在.right这个div的border上面画一个三角形。html代码如下: 画个三角形css代码如下:.right { width: 3
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titl...
span{
border-style: dashed dashed solid dashed;//上 右 下 左 想哪边为三角形 就把哪边写成solid
border-color: transparent;
border-top-color: green;
border-width: 5px;
width: