纯CSS实现三角形完美解决方法兼容IE6

php爱好者 2015-10-4 502

IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~


.div {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}
IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5),否则点线和虚线都不会出现.
最新回复 (0)
返回
发新帖