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;}直接用这个就没有这个兼容问题了,卑微妥协。