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的一些用法和注意事项。

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

css 修改三角形大小_css实现三角形
最近的一个项目页面中,有很多三角形icon,在不考虑IE兼容性下,使用了css实现三角形,记录一下代码. 1.实心三角形,利用transparent实现 (1)设置线条宽50px,div 宽高0 .t ...
无法获取未定义或 null 引用的属性“text”_【CSS】是时候开始用 CSS 自定义属性了...
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用.由自定义属性标记设定值(比如:--main-color: black;),由var() 函数 ...
文件上传一些事（ie8/9下提示下载json文件）
一.通常的写法前端写法: uploader = new ptf.PUploader({url: '<c:url value="/org/orgImportDo"/>' ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
强制页面运行于IE8模式下
突然发现IE8不能使用querySelectorAll,实在拿IE没办法,只好用以下手段强制使用IE8模式,于是选择器终于回到正轨. <meta http-equiv="X-UA-Co ...
IE8浏览器下dom元素不区分name属性大小写问题
在IE8浏览器下用name属性去获取dom元素时居然是不区分大小写的. 比如: <input type='text' name='C1'/> <input type='text' n ...
解决IE8,7下设置背景图片 background-size 不支持问题
解决IE8,7下设置背景图片 background-size 不支持问题参考文章: (1)解决IE8,7下设置背景图片 background-size 不支持问题 (2)https://www.cn ...
html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
HTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list ...
php文字链接下划线怎么取消,css怎么去掉超链接下划线
在网页中难免有若干对文字A超链接锚文本,但是在默认情况下带链接的文字全部都是有下划线效果的,那么如何把这个超链接的下划线效果给去掉呢?那我们就要借助强大的CSS了. 通过CSS设置要想让带超链接锚文本 ...
请问下谁知道，column-tree.css中zoom是什么意思，在下面这代码里面起什么作用？...
请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用? .x-column-tree .x-tree-node { zoom:0; } .x-column-tr ...

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

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

最新文章

热门文章