border:0与border:none的区别

border:0与border:none的区别主要有两点：
1.理论上的性能差异
2.浏览器兼容性差异

性能差异
border:0把border设为“0”像素，虽然在页面上看不见，但按照border默认值理解，浏览器依然对border-width和border-color进行了渲染，已经占用了内存值。
border:none把border设为“none”,即没有，浏览器解析none时将不会渲染，故不占用内存。

兼容性差异
兼容性只针对浏览器IE6,IE7与标签input、button而言。
border:none对IE6/IE7无效，边框仍然存在。

<style type="text/css">
input,button{border:none;}
</style>
<button type="button">button</button>
<input name="" type="button" value="input button" />
<input name="" type="text" value="input text" />

border:0对所有浏览器兼有效。

<style type="text/css">
input,button{border:0;}
</style>
<button type="button">button</button>
<input name="" type="button" value="input button" />
<input name="" type="text" value="input text" />

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

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

<style type="text/css">
input,button{border:none;background:none;}
</style>
<button type="button">button</button>
<input name="" type="button" value="input button" />
<input name="" type="text" value="input text" />

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

---

原文链接:
border:none;与border:0;的区别