网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

border-collapse: collapse在FireFox,IE6,IE7下的小bug

日期:2013-11-26  来源:攀枝花惠康网络公司

一向使用border-collapse: collapse来做1像素边框的表格,好比:


table{border-collapse:collapse;border: 1px solid #FFFFFF;}
table td,table th{border: 1px solid #FFFFFF;}


昨天css森林的飘发了一篇文章(http://www.charlesgarwood.com/blog/?p=13)才发现原本border-collapse: collapse在FireFox下有个小bug。


table{border-top: none;border-right:none;border-bottom: 1px solid #FFFFFF;border-left: 1px solid #FFFFFF;}
table td,table th{border-top:1px solid #FFFFFF;border-right: 1px solid #FFFFFF;border-bottom:none;border-left: 0;}


ie8,CH,OP,SF都没侍趵硎题,而在FF下饶暌怪一个小BUG:table的左边会多出1个像素的边框,而且在ie7和ie6下单元格宽度没有等分,第一个比其他几个要小一点,如图:

飘发的文章虽然有解决方案,可是小我使命太麻烦了,还不如我下面这个解决方案,没有hack或者前提注释,而且解决了膳缦沔的2个问题:

点此查看我做的demo:http://www.css88.com/demo/border-collapse/border-collapse.html

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200