IE6不支持border-color为tranparent

首先上图：

       样式如下：

.main_nav li{height:48px;}
.main_nav li a{color:#fff;display:block;font-size:16px;line-height:48px;width:200px;border-left:6px solid transparent;}
.main_nav li a:hover,.main_nav li.active a{background:#ececec;color:#494949;border-color:#2b2b2b;}

　　但在IE6下出现了BUG，border-color为transparent不能正常显示，在网上找到解决办法，应用滤镜chroma,记录至此：

.main_nav li{height:48px;}
.main_nav li a{color:#fff;display:block;font-size:16px;line-height:48px;width:200px;border-left:6px solid transparent;_border-color:tomato;_filter:chroma(color=tomato);}  /*IE6下hack解决*/
.main_nav li a:hover,.main_nav li.active a{background:#ececec;color:#494949;border-color:#2b2b2b;}

filter:chroma,

      Chroma属性可以设置一个对象中指定的颜色为透明色.

   PS:另外，用CSS写出来的小三角，代码如下：

      

<!doctype html>
<html>
	<head>
		<title>chroma实验</title>
		<meta charset="utf-8"/>
		<style type="text/css">
		*{margin:0;margin:0;}
		.demo{width:500px;height:500px;border:5px solid #139ac7;position:relative;}
		.triangle{content:'';width:0;height:0;line-height:0;border:10px solid transparent;border-left:10px solid #139ac7;position:absolute;top:0;right:-25px;}
		</style>
</head>
<body>
	<div class="demo">
		<div class="triangle"></div>
	</div>
</body>

　　在IE6下面也是不能正常显示的，这个不能用chroma来解决，只能通过 _border:10px dashed #139ac7来解决这个问题

 

posted @ 2013-04-26 22:27  独角xi  阅读(360)  评论(0)    收藏  举报