知识屋:最实用的电脑技术知识网站
所在位置:首页 > 电脑技术

在ie7及以上浏览器上显示正常的css在ie6下显示不正常

发布时间:2011-04-22 19:37:57作者:知识屋

以下css在ie7及以上版本浏览器中显示的是一个空行,但在ie6下显示的却是一条粗的虚线。怎样让在ie6显示的效果也和ie7一样呢:#abcline { border-top:6px dashed #7BD676;border-color:transparent;border-left:0px solid #7BD676; border-right:0px solid #7BD676; border-bottom:0px solid #7BD676;width:960px;height:0px;}

而且还有一个严重的问题是:在ie6下,border-top:6px被显示的空行高度,远远大于6px。

1、IE6是不支持border的transparent属性的,所以只能用IE的虑镜去实现
2、如果你的把其它边框宽度设成0了,还不如不设定它(默认边框为none),搞得那么多无用代码出来

经过简化后的代码为:#abcline{width:960px;height:0;border-top:6px dashed transparent;filter :Chroma( color= #000000) ; }

border里加transparent是对IE6以外的浏览器设置的,后面的filter是针对IE的虑镜(可解决IE的问题),前面加分号;是因为border-top属性结束符号

针对你的补充:
如果只是想获得一个空行效果,那不必那么麻烦可以用以下方法实现:
1、margin-top:6px结元素顶部加个6px的空间;
2、加个<div id=abcline"></div>,然后CSS
#abcline{height:6px;overflow:hidden;font-size:0;line-height:0;/*for IE6*/}


 

(文章内容如有侵权,敬请来信告知,我们将及时撤销)
收藏
  • 人气文章
  • 最新文章
  • 下载排行榜
  • 热门排行榜