border:none与border:0
border:none与border:0到底有什么区别
今天在刷题的时候遇见了这样的一道题，当时还有点疑惑。
因为border:none是干掉边框，而border:0是让边框的宽度变成了0px，视觉效果上也是干掉了边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
border: none;
}
.two{
border: 0;
}
</style>
</head>
<body>
<button class="one">第一个</button>
<button class="two">第二个</button>
</body>
</html>
但是！！！
他们依旧有很大的区别
border:none与border:0的区别体现为两点：一是理论上的性能差异，二是浏览器兼容性的差异。
性能差异
border:none：把border设为“none”，实际效果等同于border-style:none，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
border:0： 把border设为“0”像素效果等于border-width:0，浏览器依然对border-width、border-color进行了渲染，即已经占用了内存值。
所以，border:none对比border:0的优势就是效果一样，并且不占用内存。
兼容性差异
我们都知道到 越是好用的东西，就越是需要考虑那个叫IE的跳出来找存在感。
事实证明老IE从来没在这件事上让我失望过。
IE6、IE7中，border为“none”时，标签button、input边框依然存在。
解决方法：
1，input,button{border:none;background:none;} 据说这种方法理论上没有性能消耗，不过添加background来实现兼容不是也需要占用内存吗？
2，input,button{border:0 none;} 个人觉得这种方法相较于第一种通过background实现兼容的方法要好
3，input,button{border:0;}直接用这个就没有这个兼容问题了，卑微妥协。
5438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
