css中border:0和border:none的区别详解

性能差异：

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在,如下

代码

效果

注意在firebug中border:none和border:0的区别

下面举个例子来具体说明下

有兴趣的朋友可以复制以上代码在这个浏览器试一试：

测试结果：
1、.zerotest .setwidth
虽然定义了border-,但是border-style:none 所以无边框(IE7会显示3像素的边框，这跟border:0解析有关。)
2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
3、.nonetest .setwidth
虽然定义了border-,但是border-style:none 所以无边框(IE7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(IE7下为一像素)

综合1、4可以分析出在ie6、IE7下：
border:0 被解析为 border-width:0
border:none 被解析为 border-style:none

再来看看标准浏览器

border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高。border：none；被理解为关闭此标签，设置为0，虽然不显示，但是同样占内存。

为了少渲染border-width:0，和不占用内存，这里我们写一个兼容所有浏览器的最优写法：

border：0 none；前面的0是针对ie6和ie7的兼容，后面的none是针对标准浏览器的。

测试了下border：0 none；和border：none 0；ie6和ie7效果一致，至于渲染的和占用内存情况的利弊分析，有待进一步的分析测试，推荐用前者。

总结：

对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，如下例Demo3：

对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。